@monolith-forensics/monolith-ui 1.8.0 → 1.8.1-dev.0

package/dist/Charts/BarChart/BarChart.lib.js

@@ -0,0 +1,136 @@
+import { useMemo } from "react";
+import { useTheme } from "styled-components";
+import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientColorFromStops, getGradientStops, mixColors, } from "../ChartUtils";
+export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientColorFromStops, getGradientStops, mixColors, };
+export const getBarKey = (datum, index) => { var _a; return (_a = datum.id) !== null && _a !== void 0 ? _a : `${datum.label}-${index}`; };
+export const getSeriesKey = (series, index) => {
+    if (series.id != null)
+        return series.id;
+    if (typeof series.label === "string" || typeof series.label === "number") {
+        return String(series.label);
+    }
+    return `series-${index}`;
+};
+export const getSeriesLabelText = (label, fallbackLabel) => {
+    if (typeof label === "string" || typeof label === "number") {
+        return String(label);
+    }
+    return fallbackLabel;
+};
+export const getCategoryKey = (datum) => datum.label;
+export const useThemeColors = (colors) => {
+    const theme = useTheme();
+    return useMemo(() => (colors === null || colors === void 0 ? void 0 : colors.length)
+        ? colors
+        : [
+            theme.palette.primary.main,
+            theme.alert.info.color,
+            theme.alert.success.color,
+            theme.alert.warning.color,
+            theme.alert.error.color,
+            theme.palette.fourth.main,
+            theme.button.text.secondary,
+        ], [colors, theme]);
+};
+export const getBandPadding = (barGap, span, count) => {
+    if (count <= 1 || barGap <= 0 || span <= 0) {
+        return { inner: 0.08, outer: 0.04 };
+    }
+    const approximateStep = span / count;
+    const inner = clamp(barGap / Math.max(approximateStep, 1), 0, 0.72);
+    return {
+        inner,
+        outer: clamp(inner / 2, 0.04, 0.3),
+    };
+};
+export const getValueDomain = (values, minValue, maxValue) => {
+    const actualMin = values.length ? Math.min(...values) : 0;
+    const actualMax = values.length ? Math.max(...values) : 0;
+    const resolvedMin = minValue != null ? Math.min(minValue, 0) : Math.min(actualMin, 0);
+    const resolvedMax = maxValue != null ? Math.max(maxValue, 0) : Math.max(actualMax, 0);
+    if (resolvedMin === resolvedMax) {
+        if (resolvedMin === 0)
+            return [0, 1];
+        return [Math.min(resolvedMin, 0), Math.max(resolvedMax, 0) + 1];
+    }
+    return [resolvedMin, resolvedMax];
+};
+export const getDefaultMargin = (orientation, showCategoryAxisLabels, showValueAxisLabels, showLabels) => {
+    if (orientation === "horizontal") {
+        return {
+            top: showLabels ? 22 : 16,
+            right: showLabels ? 42 : 24,
+            bottom: showValueAxisLabels ? 34 : 18,
+            left: showCategoryAxisLabels ? 108 : 18,
+        };
+    }
+    return {
+        top: showLabels ? 28 : 16,
+        right: 18,
+        bottom: showCategoryAxisLabels ? 52 : 18,
+        left: showValueAxisLabels ? 52 : 18,
+    };
+};
+export const mergeChartMargin = (orientation, margin, showCategoryAxisLabels, showValueAxisLabels, showLabels) => {
+    var _a, _b, _c, _d;
+    const defaults = getDefaultMargin(orientation, showCategoryAxisLabels, showValueAxisLabels, showLabels);
+    return {
+        top: (_a = margin === null || margin === void 0 ? void 0 : margin.top) !== null && _a !== void 0 ? _a : defaults.top,
+        right: (_b = margin === null || margin === void 0 ? void 0 : margin.right) !== null && _b !== void 0 ? _b : defaults.right,
+        bottom: (_c = margin === null || margin === void 0 ? void 0 : margin.bottom) !== null && _c !== void 0 ? _c : defaults.bottom,
+        left: (_d = margin === null || margin === void 0 ? void 0 : margin.left) !== null && _d !== void 0 ? _d : defaults.left,
+    };
+};
+export const normalizeTickValue = (value) => Math.abs(value) < 1e-9 ? 0 : value;
+export const getRoundedBarPath = ({ x, y, width, height, radius, orientation, value, }) => {
+    if (width <= 0 || height <= 0)
+        return "";
+    const safeRadius = clamp(radius, 0, Math.min(width, height) / 2);
+    const right = x + width;
+    const bottom = y + height;
+    if (safeRadius === 0) {
+        return `M ${x} ${y} H ${right} V ${bottom} H ${x} Z`;
+    }
+    if (orientation === "vertical") {
+        if (value >= 0) {
+            return [
+                `M ${x} ${bottom}`,
+                `L ${x} ${y + safeRadius}`,
+                `Q ${x} ${y} ${x + safeRadius} ${y}`,
+                `L ${right - safeRadius} ${y}`,
+                `Q ${right} ${y} ${right} ${y + safeRadius}`,
+                `L ${right} ${bottom}`,
+                "Z",
+            ].join(" ");
+        }
+        return [
+            `M ${x} ${y}`,
+            `L ${x} ${bottom - safeRadius}`,
+            `Q ${x} ${bottom} ${x + safeRadius} ${bottom}`,
+            `L ${right - safeRadius} ${bottom}`,
+            `Q ${right} ${bottom} ${right} ${bottom - safeRadius}`,
+            `L ${right} ${y}`,
+            "Z",
+        ].join(" ");
+    }
+    if (value >= 0) {
+        return [
+            `M ${x} ${y}`,
+            `L ${right - safeRadius} ${y}`,
+            `Q ${right} ${y} ${right} ${y + safeRadius}`,
+            `L ${right} ${bottom - safeRadius}`,
+            `Q ${right} ${bottom} ${right - safeRadius} ${bottom}`,
+            `L ${x} ${bottom}`,
+            "Z",
+        ].join(" ");
+    }
+    return [
+        `M ${right} ${y}`,
+        `L ${x + safeRadius} ${y}`,
+        `Q ${x} ${y} ${x} ${y + safeRadius}`,
+        `L ${x} ${bottom - safeRadius}`,
+        `Q ${x} ${bottom} ${x + safeRadius} ${bottom}`,
+        `L ${right} ${bottom}`,
+        "Z",
+    ].join(" ");
+};

package/dist/Charts/BarChart/BarChart.styled.d.ts

@@ -0,0 +1,51 @@
+import { StyledChartActions } from "../ChartPrimitives";
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { StyledChartActions };
+export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
+export declare const StyledBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGPathElement>, {
+    $active: boolean;
+}>> & string;
+export declare const StyledGridLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGLineElementAttributes<SVGLineElement>, never>> & string;
+export declare const StyledAxisLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGLineElementAttributes<SVGLineElement>, never>> & string;
+export declare const StyledAxisText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGTextElementAttributes<SVGTextElement>, never>> & string;
+export declare const StyledValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGTextElementAttributes<SVGTextElement>, never>> & string;
+export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLegendItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $active: boolean;
+    $showSwatch: boolean;
+    $showLabel: boolean;
+    $showValue: boolean;
+}>> & string;
+export declare const StyledSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $width?: number;
+    $height?: number;
+    $radius?: number;
+}>> & string;
+export declare const StyledLegendLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledLegendValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width: number;
+    $height: number;
+}>> & string;
+export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}>> & string;
+export declare const StyledTooltipHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $radius?: string;
+}>> & string;
+export declare const StyledTooltipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledTooltipMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$marginTop" | "$direction" | "$gap"> & {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}, never>> & string;
+export declare const StyledTooltipList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTooltipRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTooltipValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/Charts/BarChart/BarChart.styled.js

@@ -0,0 +1,115 @@
+import styled from "styled-components";
+import { StyledChartActions, StyledChartLegend, StyledChartLegendLabel, StyledChartLegendSwatch, StyledChartLegendValue, StyledChartTooltip, StyledChartTooltipHeader, StyledChartTooltipLabel, StyledChartTooltipList, StyledChartTooltipMeta, StyledChartTooltipRow, StyledChartTooltipSwatch, StyledChartTooltipValue, sharedLegendItemStyles, } from "../ChartPrimitives";
+const activeBarStyles = `
+  opacity: 0.98;
+  filter: brightness(1.1) saturate(1.08);
+  transform: scale(1.01);
+`;
+export const StyledContainer = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: fit-content;
+  max-width: 100%;
+  color: ${({ theme }) => theme.palette.text.primary};
+  box-sizing: border-box;
+  overflow: visible;
+`;
+export const StyledChartScroller = styled.div `
+  display: flex;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 2px;
+`;
+export const StyledChartFrame = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+  flex: 0 0 auto;
+`;
+export { StyledChartActions };
+export const StyledSvg = styled.svg `
+  display: block;
+  overflow: visible;
+`;
+export const StyledBar = styled.path `
+  cursor: pointer;
+  outline: none;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition:
+    opacity 0.18s ease,
+    filter 0.18s ease,
+    transform 0.18s ease;
+
+  &:hover,
+  &:focus-visible {
+    ${activeBarStyles}
+  }
+
+  ${({ $active }) => $active && activeBarStyles}
+`;
+export const StyledGridLine = styled.line `
+  stroke: ${({ theme }) => theme.palette.divider};
+  stroke-opacity: 0.65;
+  stroke-dasharray: 3 4;
+`;
+export const StyledAxisLine = styled.line `
+  stroke: ${({ theme }) => theme.palette.divider};
+  stroke-width: 1;
+`;
+export const StyledAxisText = styled.text `
+  fill: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 11px;
+`;
+export const StyledValueLabel = styled.text `
+  fill: ${({ theme }) => theme.palette.text.primary};
+  font-size: 11px;
+  font-weight: 600;
+  pointer-events: none;
+`;
+export const StyledLegend = StyledChartLegend;
+export const StyledLegendItem = styled.div `
+  display: grid;
+  grid-template-columns: ${({ $showSwatch, $showLabel, $showValue }) => [
+    $showSwatch ? "4px" : null,
+    $showLabel ? "minmax(0, 1fr)" : null,
+    $showValue ? "auto" : null,
+]
+    .filter(Boolean)
+    .join(" ")};
+  ${sharedLegendItemStyles}
+`;
+export const StyledSwatch = StyledChartLegendSwatch;
+export const StyledLegendLabel = StyledChartLegendLabel;
+export const StyledLegendValue = StyledChartLegendValue;
+export const StyledEmptyState = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $width }) => $width}px;
+  height: ${({ $height }) => $height}px;
+  border: 1px dashed ${({ theme }) => theme.palette.divider};
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    ${({ theme }) => theme.palette.background.paper} 0%,
+    ${({ theme }) => theme.palette.background.secondary} 100%
+  );
+  font-size: 12px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const StyledTooltip = StyledChartTooltip;
+export const StyledTooltipHeader = StyledChartTooltipHeader;
+export const StyledTooltipSwatch = StyledChartTooltipSwatch;
+export const StyledTooltipLabel = StyledChartTooltipLabel;
+export const StyledTooltipMeta = styled(StyledChartTooltipMeta) `
+  display: block;
+`;
+export const StyledTooltipList = StyledChartTooltipList;
+export const StyledTooltipRow = StyledChartTooltipRow;
+export const StyledTooltipValue = StyledChartTooltipValue;

package/dist/Charts/BarChart/BarChart.types.d.ts

@@ -0,0 +1,171 @@
+import React, { HTMLAttributes } from "react";
+import type { ChartExportOptions } from "../ChartUtils";
+export type BarChartDatum<TData = unknown> = {
+    /** Stable identifier for the bar. Falls back to label and index when omitted. */
+    id?: string | number;
+    /** Display label used for axes, labels, legends, tooltips, and accessibility text. */
+    label: string;
+    /** Numeric value rendered by the bar. Zero and negative values are supported. */
+    value: number;
+    /** Optional per-bar color. Takes precedence over colorGradient, colors, and theme colors. */
+    color?: string;
+    /** Optional contextual payload returned in click callbacks and formatter functions. */
+    data?: TData;
+};
+export type BarChartSeries<TData = unknown> = {
+    /** Stable identifier for the series. Falls back to its label and index when omitted. */
+    id?: string | number;
+    /** Display label used in legends, tooltips, and accessibility text. */
+    label: React.ReactNode;
+    /** Optional per-series color. Takes precedence over colors, colorGradient, and theme colors. */
+    color?: string;
+    /** Optional gradient used to resolve this series color when no per-datum color is provided. */
+    colorGradient?: BarChartColorGradient;
+    /** Values rendered for this series. Categories are matched by datum label. */
+    data: BarChartDatum<TData>[];
+};
+export type BarChartColorGradient = 
+/** Ordered color stops used to generate bar colors across a gradient scale. */
+string[]
+/** Two-color gradient range used to generate bar colors from start to end. */
+ | {
+    /** Starting color for generated bar colors. */
+    from: string;
+    /** Ending color for generated bar colors. */
+    to: string;
+};
+export type BarChartOrientation = "vertical" | "horizontal";
+export type BarChartSeriesLayout = "grouped" | "stacked";
+export type BarChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ResolvedBar<TData = unknown> = BarChartDatum<TData> & {
+    key: string | number;
+    keyString: string;
+    color: string;
+    index: number;
+    renderIndex: number;
+    seriesKey: string | number;
+    seriesIndex: number;
+    seriesLabel: React.ReactNode;
+    seriesLabelText: string;
+    categoryKey: string;
+    categoryLabel: string;
+    valueStart: number;
+    valueEnd: number;
+    sourceSeries?: BarChartSeries<TData>;
+};
+export type ResolvedBarSeries<TData = unknown> = {
+    key: string | number;
+    label: React.ReactNode;
+    labelText: string;
+    color: string;
+    index: number;
+    totalValue: number;
+    sourceSeries?: BarChartSeries<TData>;
+};
+export type ResolvedBarCategory<TData = unknown> = {
+    key: string;
+    label: string;
+    index: number;
+    representativeDatum: BarChartDatum<TData>;
+    bars: ResolvedBar<TData>[];
+    positiveTotal: number;
+    negativeTotal: number;
+};
+export type ActiveTooltip = {
+    barKey: string | number;
+    x: number;
+    y: number;
+};
+export type BarChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & ChartExportOptions & {
+    /** Single-series bar data. Ignored when series is provided. */
+    data?: BarChartDatum<TData>[];
+    /** Multi-series bar data. Takes precedence over data when provided. */
+    series?: BarChartSeries<TData>[];
+    /** SVG width in pixels. Defaults to 640. */
+    width?: number;
+    /** SVG height in pixels. Defaults to 320. */
+    height?: number;
+    /** Bar layout direction. Defaults to "vertical". */
+    orientation?: BarChartOrientation;
+    /** Multi-series layout mode. Defaults to "grouped". */
+    seriesLayout?: BarChartSeriesLayout;
+    /** Partial chart margin overrides. Defaults are based on orientation and visible labels. */
+    margin?: Partial<BarChartMargin>;
+    /** Gap between bars in pixels. Defaults to 10. */
+    barGap?: number;
+    /** Gap between bars within each grouped category. Defaults to barGap. */
+    groupBarGap?: number;
+    /** Maximum bar thickness in pixels before bars are centered within their band. */
+    maxBarThickness?: number;
+    /** Bar corner radius in pixels. Defaults to 3. */
+    barRadius?: number;
+    /** Categorical color palette for bars. Used after per-bar colors and colorGradient. */
+    colors?: string[];
+    /** Generates bar colors along a gradient scale. Per-bar color values still take precedence. */
+    colorGradient?: BarChartColorGradient;
+    /** Opacity applied to bar fills. Clamped between 0 and 1. Defaults to 1. */
+    barOpacity?: number;
+    /** Stroke color around each bar. Defaults to the theme divider color. */
+    barBorderColor?: string;
+    /** Stroke width around each bar in pixels. Defaults to 1. */
+    barBorderWidth?: number;
+    /** Stroke opacity around each bar. Clamped between 0 and 1. Defaults to 1. */
+    barBorderOpacity?: number;
+    /** Minimum domain value used for the value axis. Zero is always included. */
+    minValue?: number;
+    /** Maximum domain value used for the value axis. Zero is always included. */
+    maxValue?: number;
+    /** Approximate number of value-axis ticks. Defaults to 5. */
+    valueTickCount?: number;
+    /** Shows or hides value-axis grid lines. Defaults to true. */
+    showGridLines?: boolean;
+    /** Shows or hides axis lines. Defaults to true. */
+    showAxisLines?: boolean;
+    /** Shows or hides category-axis labels. Defaults to true. */
+    showCategoryAxisLabels?: boolean;
+    /** Shows or hides value-axis labels. Defaults to true. */
+    showValueAxisLabels?: boolean;
+    /** Shows or hides legend items. Defaults to false. */
+    showLegend?: boolean;
+    /** Shows or hides legend color swatches. Defaults to true. */
+    showLegendSwatches?: boolean;
+    /** Shows or hides legend labels. Defaults to true. */
+    showLegendLabels?: boolean;
+    /** Shows or hides legend formatted values. Defaults to true. */
+    showLegendValues?: boolean;
+    /** Shows or hides formatted value labels near bars. Defaults to false. */
+    showLabels?: boolean;
+    /** Content shown when no valid numeric data values are available. Defaults to "No data". */
+    emptyLabel?: React.ReactNode;
+    /** Accessible label for the SVG chart image. Defaults to "Bar chart". */
+    ariaLabel?: string;
+    /** Animates bars on initial render from the zero baseline. Defaults to false. */
+    animateOnRender?: boolean;
+    /** Duration in milliseconds for each bar animation. Defaults to 520. */
+    animationDuration?: number;
+    /** Delay in milliseconds between each bar animation. Defaults to 35. */
+    animationStagger?: number;
+    /** Shows a custom themed tooltip when hovering over bars. Defaults to false. */
+    showTooltips?: boolean;
+    /** Formats values shown in labels, legends, tooltips, and accessibility text. */
+    valueFormatter?: (value: number, datum: BarChartDatum<TData>, series?: BarChartSeries<TData>) => React.ReactNode;
+    /** Formats category labels shown on the category axis. */
+    categoryLabelFormatter?: (datum: BarChartDatum<TData>, index: number, series?: BarChartSeries<TData>) => React.ReactNode;
+    /** Formats value-axis tick labels. */
+    tickFormatter?: (value: number) => React.ReactNode;
+    /** Formats labels rendered near bars. */
+    labelFormatter?: (datum: BarChartDatum<TData>, index: number, series?: BarChartSeries<TData>) => React.ReactNode;
+    /** Custom tooltip renderer. Receives the original datum and its index. */
+    tooltipFormatter?: (datum: BarChartDatum<TData>, index: number, series?: BarChartSeries<TData>) => React.ReactNode;
+    /** Called when a bar is clicked or activated with Enter/Space. */
+    onBarClick?: (event: React.MouseEvent<SVGPathElement> | React.KeyboardEvent<SVGPathElement>, datum: BarChartDatum<TData>, series?: BarChartSeries<TData>) => void;
+    /** Called when a single-series legend item is clicked or activated with Enter/Space. */
+    onLegendItemClick?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, datum: BarChartDatum<TData>) => void;
+    /** Called when a multi-series legend item is clicked or activated with Enter/Space. */
+    onSeriesLegendItemClick?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, series: BarChartSeries<TData>) => void;
+};

package/dist/Charts/BarChart/BarChart.types.js

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

package/dist/Charts/BarChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./BarChart";
+export { BarChart } from "./BarChart";
+export type { BarChartColorGradient, BarChartDatum, BarChartMargin, BarChartOrientation, BarChartProps, BarChartSeries, BarChartSeriesLayout, } from "./BarChart.types";

package/dist/Charts/BarChart/index.js

@@ -0,0 +1,2 @@
+export { default } from "./BarChart";
+export { BarChart } from "./BarChart";

package/dist/Charts/ChartPrimitives/ChartExportControl.d.ts

@@ -0,0 +1,11 @@
+import React, { RefObject } from "react";
+import { ChartExportFormat } from "../ChartUtils";
+export type ChartExportControlProps = {
+    rootRef?: RefObject<HTMLElement | null>;
+    svgRef: RefObject<SVGSVGElement | null>;
+    fileName: string;
+    formats: ChartExportFormat[];
+    scale?: number;
+    backgroundColor?: string;
+};
+export declare const ChartExportControl: React.FC<ChartExportControlProps>;

package/dist/Charts/ChartPrimitives/ChartExportControl.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DownloadIcon } from "lucide-react";
+import { DropDownMenu } from "../../DropDownMenu";
+import { downloadChartImage } from "../ChartUtils";
+const EXPORT_LABELS = {
+    svg: "Download SVG",
+    png: "Download PNG",
+    jpg: "Download JPG",
+};
+export const ChartExportControl = ({ rootRef, svgRef, fileName, formats, scale, backgroundColor, }) => {
+    const exportItems = formats.map((format) => ({
+        label: EXPORT_LABELS[format],
+        value: format,
+    }));
+    return (_jsx(DropDownMenu, { data: exportItems, variant: "outlined", size: "xs", arrow: true, buttonProps: {
+            title: "Download chart image",
+            size: "xxs",
+            style: { padding: "0px 4px" },
+        }, dropDownProps: {
+            style: { width: 168, maxWidth: 220 },
+        }, onItemSelect: (item) => void downloadChartImage({
+            rootElement: rootRef === null || rootRef === void 0 ? void 0 : rootRef.current,
+            svg: svgRef.current,
+            format: item.value,
+            fileName,
+            scale,
+            backgroundColor,
+        }), children: _jsx(DownloadIcon, { size: 14 }) }));
+};

package/dist/Charts/ChartPrimitives/chartActions.styled.d.ts

@@ -0,0 +1 @@
+export declare const StyledChartActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Charts/ChartPrimitives/chartActions.styled.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+export const StyledChartActions = styled.div `
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+`;

package/dist/Charts/ChartPrimitives/chartLegend.styled.d.ts

@@ -0,0 +1,12 @@
+export declare const StyledChartLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const sharedLegendItemStyles: import("styled-components").RuleSet<{
+    $active: boolean;
+}>;
+export declare const StyledChartLegendLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledChartLegendValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledChartLegendSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $width?: number;
+    $height?: number;
+    $radius?: number;
+}>> & string;

package/dist/Charts/ChartPrimitives/chartLegend.styled.js

@@ -0,0 +1,52 @@
+import styled, { css } from "styled-components";
+export const StyledChartLegend = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 168px;
+  max-width: 280px;
+  gap: 6px;
+`;
+export const sharedLegendItemStyles = css `
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  gap: 10px;
+  min-height: 30px;
+  padding: 5px 7px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 12px;
+  transition:
+    background-color 0.16s ease,
+    border-color 0.16s ease;
+
+  &:hover,
+  &:focus-visible {
+    border-color: ${({ theme }) => theme.palette.divider};
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    outline: none;
+  }
+
+  ${({ $active, theme }) => $active &&
+    `
+      border-color: ${theme.palette.divider};
+      background-color: ${theme.palette.action.hover};
+    `}
+`;
+export const StyledChartLegendLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const StyledChartLegendValue = styled.span `
+  font-variant-numeric: tabular-nums;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  white-space: nowrap;
+`;
+export const StyledChartLegendSwatch = styled.span `
+  width: ${({ $width = 4 }) => $width}px;
+  height: ${({ $height = 22 }) => $height}px;
+  border-radius: ${({ $radius = 2 }) => $radius}px;
+  background: ${({ $color }) => $color};
+`;

package/dist/Charts/ChartPrimitives/chartTooltip.styled.d.ts

@@ -0,0 +1,19 @@
+export declare const StyledChartTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}>> & string;
+export declare const StyledChartTooltipHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $radius?: string;
+}>> & string;
+export declare const StyledChartTooltipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledChartTooltipMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}>> & string;
+export declare const StyledChartTooltipList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartTooltipRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartTooltipValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;