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

package/dist/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/BarChart/BarChart.styled.d.ts

@@ -0,0 +1,49 @@
+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 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/BarChart/BarChart.styled.js

@@ -0,0 +1,111 @@
+import styled from "styled-components";
+import { 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 `
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 2px;
+`;
+export const StyledChartFrame = styled.div `
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+`;
+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/BarChart/BarChart.types.d.ts

@@ -0,0 +1,170 @@
+import React, { HTMLAttributes } from "react";
+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> & {
+    /** 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/BarChart/BarChart.types.js

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

package/dist/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/BarChart/index.js

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

package/dist/Button/Button.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Loader2Icon } from "lucide-react";
+import { getControlSizeTokens } from "../core";
 const colors = {
     gray: "#888888",
     lightGray: "#f0f0f0",
@@ -35,63 +36,14 @@ const StyledButton = styled.button `
   white-space: nowrap;
 
   width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
-  height: ${({ theme, size }) => {
-    switch (size) {
-        case "xxs":
-            return `24px`;
-        case "xs":
-            return `28px`;
-        case "sm":
-            return `34px`;
-        case "md":
-            return `40px`;
-        case "lg":
-            return `48px`;
-        case "xl":
-            return `58px`;
-        default:
-            return `34px`;
-    }
-}};
+  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
-  font-size: ${({ theme, size }) => {
-    switch (size) {
-        case "xxs":
-            return `11px`;
-        case "xs":
-            return `12px`;
-        case "sm":
-            return `14px`;
-        case "md":
-            return `16px`;
-        case "lg":
-            return `18px`;
-        case "xl":
-            return `20px`;
-        default:
-            return `14px`;
-    }
-}};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
   padding: ${({ theme, size, variant }) => {
     if (variant === "text")
         return `0px 0px`;
-    switch (size) {
-        case "xxs":
-            return `0px 8px`;
-        case "xs":
-            return `0px 12px`;
-        case "sm":
-            return `0px 16px`;
-        case "md":
-            return `0px 20px`;
-        case "lg":
-            return `0px 24px`;
-        case "xl":
-            return `0px 30px`;
-        default:
-            return `0px 16px`;
-    }
+    return `0px ${getControlSizeTokens(size).buttonPaddingX}px`;
 }};
 
   color: ${({ theme, variant, color }) => {
@@ -175,6 +127,7 @@ const StyledButton = styled.button `
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   }
 
   .button-label {
@@ -183,17 +136,15 @@ const StyledButton = styled.button `
   }
 
   [data-position="left"] {
-    margin-inline-end: 6px;
     display: flex;
     align-items: center;
   }
 
   [data-position="right"] {
-    margin-inline-start: 6px;
-    padding-inline-start: 6px;
     margin-left: auto;
     display: flex;
     align-items: center;
+    padding-inline-start: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   }
 
   &:hover {
@@ -264,8 +215,8 @@ const StyledAnchor = styled.a `
 `;
 const StyledLoader = styled.span `
   svg {
-    width: 16px;
-    height: 16px;
+    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
     color: ${({ theme, color }) => {
     var _a;
     return color
@@ -285,6 +236,6 @@ const StyledLoader = styled.span `
 `;
 export const Button = forwardRef((props, ref) => {
     const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null, justify = "center" } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download", "justify"]);
-    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
+    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { size: other.size, children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
     return (_jsx(StyledButton, Object.assign({ ref: ref }, other, { children: href ? (_jsx(StyledAnchor, { href: href, download: download, children: buttonContent })) : (buttonContent) })));
 });

package/dist/Calendar/Calendar.d.ts

@@ -1,7 +1,9 @@
 interface CalendarProps {
     defaultValue?: Date;
     value?: Date | null;
-    onChange?: (date: Date | null) => void;
+    onChange?: (date: Date | null, meta?: {
+        source: "date" | "month" | "year" | "time" | "clear";
+    }) => void;
     hourFormat?: "12" | "24";
     includeTime?: boolean;
     clearable?: boolean;