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

package/dist/Charts/LineChart/LineChart.lib.js

@@ -0,0 +1,132 @@
+import { area, curveLinear, curveMonotoneX, curveNatural, curveStep, line, } from "d3-shape";
+import { useMemo } from "react";
+import { useTheme } from "styled-components";
+import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors, } from "../ChartUtils";
+export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors };
+export const getPointKey = (datum, index) => { var _a; return (_a = datum.id) !== null && _a !== void 0 ? _a : `${String(datum.x)}-${index}`; };
+export const getSeriesKey = (series, index) => {
+    var _a;
+    return (_a = series.id) !== null && _a !== void 0 ? _a : (typeof series.label === "string" || typeof series.label === "number"
+        ? `${series.label}-${index}`
+        : `series-${index}`);
+};
+export const useThemeColor = (lineColor) => {
+    const theme = useTheme();
+    return useMemo(() => lineColor !== null && lineColor !== void 0 ? lineColor : theme.palette.primary.main, [lineColor, theme.palette.primary.main]);
+};
+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 getSeriesLabelText = (label, fallback) => {
+    if (typeof label === "string" || typeof label === "number") {
+        return String(label);
+    }
+    return fallback;
+};
+export const parseLineChartXValue = (value) => {
+    if (value instanceof Date) {
+        return Number.isFinite(value.getTime()) ? value : null;
+    }
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? value : null;
+    }
+    if (typeof value !== "string")
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const numeric = Number(trimmed);
+    if (!Number.isNaN(numeric) && trimmed === String(numeric)) {
+        return numeric;
+    }
+    const timestamp = Date.parse(trimmed);
+    if (!Number.isNaN(timestamp)) {
+        return new Date(timestamp);
+    }
+    return trimmed;
+};
+export const resolveXAxisType = (points, xAxisType) => {
+    var _a;
+    if (xAxisType !== "auto")
+        return xAxisType;
+    const firstValue = (_a = points[0]) === null || _a === void 0 ? void 0 : _a.parsedX;
+    if (firstValue instanceof Date)
+        return "time";
+    if (typeof firstValue === "number")
+        return "linear";
+    return "point";
+};
+export const getDefaultMargin = (showXAxisLabels, showYAxisLabels, showLabels) => ({
+    top: showLabels ? 24 : 16,
+    right: showLabels ? 52 : 20,
+    bottom: showXAxisLabels ? 42 : 18,
+    left: showYAxisLabels ? 56 : 18,
+});
+export const mergeChartMargin = (margin, showXAxisLabels, showYAxisLabels, showLabels) => {
+    var _a, _b, _c, _d;
+    const defaults = getDefaultMargin(showXAxisLabels, showYAxisLabels, 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 getValueDomain = (values, minValue, maxValue) => {
+    const actualMin = values.length ? Math.min(...values) : 0;
+    const actualMax = values.length ? Math.max(...values) : 0;
+    const resolvedMin = minValue !== null && minValue !== void 0 ? minValue : actualMin;
+    const resolvedMax = maxValue !== null && maxValue !== void 0 ? maxValue : actualMax;
+    if (resolvedMin === resolvedMax) {
+        if (resolvedMin === 0)
+            return [0, 1];
+        return [resolvedMin - 1, resolvedMax + 1];
+    }
+    return [resolvedMin, resolvedMax];
+};
+export const getCurveFactory = (curve) => {
+    switch (curve) {
+        case "linear":
+            return curveLinear;
+        case "step":
+            return curveStep;
+        case "natural":
+            return curveNatural;
+        case "monotone":
+        default:
+            return curveMonotoneX;
+    }
+};
+export const buildLinePath = (points, getX, getY, curve) => line()
+    .defined((point) => Number.isFinite(point.y))
+    .x(getX)
+    .y(getY)
+    .curve(getCurveFactory(curve))(points);
+export const buildAreaPath = (points, getX, getY, y0, curve) => area()
+    .defined((point) => Number.isFinite(point.y))
+    .x(getX)
+    .y0(y0)
+    .y1(getY)
+    .curve(getCurveFactory(curve))(points);
+export const measureSvgPath = (path) => {
+    if (!path)
+        return 0;
+    try {
+        return path.getTotalLength();
+    }
+    catch (_a) {
+        return 0;
+    }
+};
+export const normalizeTickValue = (value) => Math.abs(value) < 1e-9 ? 0 : value;

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

@@ -0,0 +1,59 @@
+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 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 StyledArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGPathElement>, never>> & string;
+export declare const StyledLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGPathElement>, {
+    $active: boolean;
+    $dimmed: boolean;
+}>> & string;
+export declare const StyledPoint: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, {
+    $active: boolean;
+}>> & string;
+export declare const StyledHoverTarget: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGRectElement>, 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;
+}>> & string;
+export declare const StyledLegendLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+}>> & 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").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minWidth" | "$maxWidth" | "$transform"> & {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}, import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minWidth" | "$maxWidth" | "$transform"> & {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}>, never>, never>> & 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").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color" | "$radius"> & {
+    $color: string;
+    $radius?: string;
+}, import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color" | "$radius"> & {
+    $color: string;
+    $radius?: string;
+}>, never>, never>> & 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("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$marginTop" | "$direction" | "$gap"> & {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}, import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$marginTop" | "$direction" | "$gap"> & {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}>, never>, never>> & string;

package/dist/Charts/LineChart/LineChart.styled.js

@@ -0,0 +1,147 @@
+import styled from "styled-components";
+import { StyledChartActions, StyledChartLegend, StyledChartLegendLabel, StyledChartLegendValue, StyledChartTooltip, StyledChartTooltipHeader, StyledChartTooltipLabel, StyledChartTooltipMeta, StyledChartTooltipSwatch, sharedLegendItemStyles, } from "../ChartPrimitives";
+const activePointStyles = `
+  filter: brightness(1.08) saturate(1.06);
+  transform: scale(1.08);
+`;
+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;
+  flex: 0 0 auto;
+`;
+export { StyledChartActions };
+export const StyledSvg = styled.svg `
+  display: block;
+  overflow: visible;
+`;
+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 StyledArea = styled.path `
+  transition:
+    opacity 0.16s ease,
+    filter 0.16s ease;
+  pointer-events: none;
+`;
+export const StyledLine = styled.path `
+  fill: none;
+  pointer-events: none;
+  transition:
+    opacity 0.16s ease,
+    filter 0.16s ease;
+
+  ${({ $active }) => $active &&
+    `
+      filter: brightness(1.12) saturate(1.08);
+    `}
+
+  ${({ $dimmed }) => $dimmed &&
+    `
+      opacity: 0.34;
+    `}
+`;
+export const StyledPoint = styled.circle `
+  cursor: pointer;
+  outline: none;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition:
+    opacity 0.16s ease,
+    filter 0.16s ease,
+    transform 0.16s ease;
+
+  &:hover,
+  &:focus-visible {
+    ${activePointStyles}
+  }
+
+  ${({ $active }) => $active && activePointStyles}
+`;
+export const StyledHoverTarget = styled.rect `
+  fill: transparent;
+  cursor: crosshair;
+`;
+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: 20px minmax(0, 1fr) auto;
+  ${sharedLegendItemStyles}
+`;
+export const StyledLegendLine = styled.span `
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  width: 20px;
+  height: 2px;
+  border-radius: 999px;
+  background: ${({ $color }) => $color};
+`;
+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 = styled(StyledChartTooltip).attrs({
+    $minWidth: 132,
+    $maxWidth: 240,
+    $transform: "none",
+}) ``;
+export const StyledTooltipHeader = StyledChartTooltipHeader;
+export const StyledTooltipSwatch = styled(StyledChartTooltipSwatch).attrs({
+    $radius: "999px",
+}) ``;
+export const StyledTooltipLabel = StyledChartTooltipLabel;
+export const StyledTooltipMeta = styled(StyledChartTooltipMeta).attrs({
+    $direction: "column",
+    $gap: 2,
+    $marginTop: 4,
+}) ``;

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

@@ -0,0 +1,193 @@
+import React, { HTMLAttributes } from "react";
+import type { ChartExportOptions } from "../ChartUtils";
+export type LineChartDatum<TData = unknown> = {
+    /** Stable identifier for the point. Falls back to x and index when omitted. */
+    id?: string | number;
+    /** X-axis value. Supports Date, ISO-like date strings, numbers, and category strings. */
+    x: Date | string | number;
+    /** Y-axis value rendered by the line. */
+    y: number;
+    /** Optional per-point color. Takes precedence over lineColor and theme color. */
+    color?: string;
+    /** Optional contextual payload returned in callbacks and formatter functions. */
+    data?: TData;
+};
+export type LineChartColorGradient = 
+/** Ordered color stops used to generate a line or area gradient. */
+string[]
+/** Two-color gradient range used from start to end of the line. */
+ | {
+    /** Starting color for the generated gradient. */
+    from: string;
+    /** Ending color for the generated gradient. */
+    to: string;
+};
+export type LineChartXAxisType = "auto" | "time" | "linear" | "point";
+export type LineChartCurve = "linear" | "monotone" | "step" | "natural";
+export type LineChartSeries<TData = unknown> = {
+    /** Stable identifier for the series. Falls back to its label and index when omitted. */
+    id?: string | number;
+    /** Display label used in legends and tooltips. */
+    label: React.ReactNode;
+    /** Optional per-series line color. Takes precedence over colors and theme colors. */
+    color?: string;
+    /** Optional per-series gradient for the line and area. */
+    colorGradient?: LineChartColorGradient;
+    /** Optional per-series stroke dasharray. */
+    lineDasharray?: string;
+    /** Optional per-series line width in pixels. */
+    lineWidth?: number;
+    /** Optional per-series line opacity between 0 and 1. */
+    lineOpacity?: number;
+    /** Optional per-series area visibility override. */
+    showArea?: boolean;
+    /** Optional per-series area color. Defaults to the resolved series color. */
+    areaColor?: string;
+    /** Optional per-series area opacity between 0 and 1. */
+    areaOpacity?: number;
+    /** Optional per-series point visibility override. */
+    showPoints?: boolean;
+    /** Optional per-series point fill color. Defaults to the resolved series color. */
+    pointColor?: string;
+    /** Optional per-series point radius in pixels. */
+    pointRadius?: number;
+    /** Optional per-series active point radius in pixels. */
+    activePointRadius?: number;
+    /** Values rendered by this series. */
+    data: LineChartDatum<TData>[];
+};
+export type LineChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ResolvedLinePoint<TData = unknown> = LineChartDatum<TData> & {
+    key: string | number;
+    index: number;
+    parsedX: Date | number | string;
+    xType: "time" | "linear" | "point";
+    seriesKey: string | number;
+    seriesIndex: number;
+    seriesLabel: React.ReactNode;
+    seriesLabelText: string;
+    seriesColor: string;
+};
+export type ResolvedLineSeries<TData = unknown> = {
+    key: string | number;
+    label: React.ReactNode;
+    labelText: string;
+    color: string;
+    gradientStops: string[] | null;
+    lineDasharray?: string;
+    lineWidth: number;
+    lineOpacity: number;
+    showArea: boolean;
+    areaColor: string;
+    areaOpacity: number;
+    showPoints: boolean;
+    pointColor: string;
+    pointRadius: number;
+    activePointRadius: number;
+    sourceSeries?: LineChartSeries<TData>;
+    points: ResolvedLinePoint<TData>[];
+};
+export type ActiveTooltip = {
+    pointKey: string | number;
+    x: number;
+    y: number;
+};
+export type LineChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & ChartExportOptions & {
+    /** Single-series line data. Ignored when series is provided. */
+    data?: LineChartDatum<TData>[];
+    /** Multi-series line data. Takes precedence over data when provided. */
+    series?: LineChartSeries<TData>[];
+    /** Label used for the single-line variant in legend and tooltip context. */
+    seriesLabel?: React.ReactNode;
+    /** SVG width in pixels. Defaults to 720. */
+    width?: number;
+    /** SVG height in pixels. Defaults to 320. */
+    height?: number;
+    /** Partial chart margin overrides. Defaults are based on visible labels. */
+    margin?: Partial<LineChartMargin>;
+    /** X-axis scale type. Defaults to "auto". */
+    xAxisType?: LineChartXAxisType;
+    /** D3 curve interpolation used for the line. Defaults to "monotone". */
+    curve?: LineChartCurve;
+    /** Stroke color for the line. Defaults to the theme primary color. */
+    lineColor?: string;
+    /** Categorical color palette used for multiple series. */
+    colors?: string[];
+    /** Generates a gradient for the line and area from start to end. */
+    colorGradient?: LineChartColorGradient;
+    /** Stroke width of the line in pixels. Defaults to 2.5. */
+    lineWidth?: number;
+    /** Opacity applied to the line stroke. Clamped between 0 and 1. Defaults to 1. */
+    lineOpacity?: number;
+    /** SVG stroke dasharray applied to the line. */
+    lineDasharray?: string;
+    /** Shows a filled area under the line. Defaults to false. */
+    showArea?: boolean;
+    /** Fill color for the area. Defaults to the line color. */
+    areaColor?: string;
+    /** Opacity applied to the area fill. Clamped between 0 and 1. Defaults to 0.14. */
+    areaOpacity?: number;
+    /** Shows visible point markers. Defaults to false. */
+    showPoints?: boolean;
+    /** Point marker radius in pixels. Defaults to 3. */
+    pointRadius?: number;
+    /** Radius of the active hovered point marker in pixels. Defaults to 4. */
+    activePointRadius?: number;
+    /** Point fill color. Defaults to the line color. */
+    pointColor?: string;
+    /** Point stroke color. Defaults to the theme background paper color. */
+    pointBorderColor?: string;
+    /** Point stroke width in pixels. Defaults to 1.5. */
+    pointBorderWidth?: number;
+    /** Opacity applied to point markers. Clamped between 0 and 1. Defaults to 1. */
+    pointOpacity?: number;
+    /** Minimum y-domain value. */
+    yMin?: number;
+    /** Maximum y-domain value. */
+    yMax?: number;
+    /** Approximate number of x-axis ticks for continuous scales. Defaults to 6. */
+    xTickCount?: number;
+    /** Approximate number of y-axis ticks. Defaults to 5. */
+    yTickCount?: number;
+    /** Shows or hides grid lines. Defaults to true. */
+    showGridLines?: boolean;
+    /** Shows or hides axis lines. Defaults to true. */
+    showAxisLines?: boolean;
+    /** Shows or hides x-axis labels. Defaults to true. */
+    showXAxisLabels?: boolean;
+    /** Shows or hides y-axis labels. Defaults to true. */
+    showYAxisLabels?: boolean;
+    /** Shows or hides a compact legend. Defaults to false. */
+    showLegend?: boolean;
+    /** Shows or hides point labels for smaller datasets. Defaults to false. */
+    showLabels?: boolean;
+    /** Content shown when no valid data values are available. Defaults to "No data". */
+    emptyLabel?: React.ReactNode;
+    /** Accessible label for the SVG chart image. Defaults to "Line chart". */
+    ariaLabel?: string;
+    /** Animates the line on initial render. Defaults to false. */
+    animateOnRender?: boolean;
+    /** Duration in milliseconds for line animation. Defaults to 720. */
+    animationDuration?: number;
+    /** Shows a custom themed tooltip when hovering the chart. Defaults to false. */
+    showTooltips?: boolean;
+    /** Formats y values shown in labels, tooltips, and accessibility text. */
+    valueFormatter?: (value: number, datum: LineChartDatum<TData>, series?: LineChartSeries<TData>) => React.ReactNode;
+    /** Formats x values shown in tooltips and accessibility text. */
+    xValueFormatter?: (value: Date | string | number, datum: LineChartDatum<TData>, series?: LineChartSeries<TData>) => React.ReactNode;
+    /** Formats x-axis tick labels. */
+    xTickFormatter?: (value: Date | string | number) => React.ReactNode;
+    /** Formats y-axis tick labels. */
+    yTickFormatter?: (value: number) => React.ReactNode;
+    /** Formats labels rendered near points. */
+    labelFormatter?: (datum: LineChartDatum<TData>, index: number, series?: LineChartSeries<TData>) => React.ReactNode;
+    /** Custom tooltip renderer. Receives the original datum and its index. */
+    tooltipFormatter?: (datum: LineChartDatum<TData>, index: number, series?: LineChartSeries<TData>) => React.ReactNode;
+    /** Called when a point is clicked or activated with Enter/Space. */
+    onPointClick?: (event: React.MouseEvent<SVGCircleElement | SVGRectElement> | React.KeyboardEvent<SVGCircleElement | SVGRectElement>, datum: LineChartDatum<TData>, series?: LineChartSeries<TData>) => void;
+};

package/dist/Charts/LineChart/LineChart.types.js

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

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

@@ -0,0 +1,3 @@
+export { default } from "./LineChart";
+export { LineChart } from "./LineChart";
+export type { LineChartColorGradient, LineChartCurve, LineChartDatum, LineChartMargin, LineChartProps, LineChartSeries, LineChartXAxisType, } from "./LineChart.types";

package/dist/Charts/LineChart/index.js

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

package/dist/Charts/PieChart/PieChart.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, RefAttributes } from "react";
+import { ChartHandle } from "../ChartUtils";
+import { PieChartProps } from "./PieChart.types";
+export declare const PieChart: <TData>(props: PieChartProps<TData> & RefAttributes<ChartHandle>) => ReactElement | null;