@reltio/design 0.1.0 → 0.2.0

package/charts/Chart/Chart.d.ts

@@ -0,0 +1,4 @@
+import * as echartsCore from "echarts/core";
+import type { ChartProps } from "./Chart.types";
+export { echartsCore as echarts };
+export declare const Chart: ({ option, renderer, height, loading, className, style, ...rest }: ChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/Chart/Chart.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GridComponent, LegendComponent, TooltipComponent, } from "echarts/components";
+import * as echartsCore from "echarts/core";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+import { useEffect, useRef } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./Chart.module.css";
+import { buildTheme } from "./theme";
+export { echartsCore as echarts };
+echartsCore.use([
+    CanvasRenderer,
+    SVGRenderer,
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+]);
+const DEFAULT_HEIGHT = 300;
+export const Chart = ({ option, renderer = "canvas", height = DEFAULT_HEIGHT, loading = false, className, style, ...rest }) => {
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const rendererRef = useRef(renderer);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const theme = buildTheme(container);
+        const chart = echartsCore.init(container, theme, {
+            renderer: rendererRef.current,
+        });
+        chartRef.current = chart;
+        const resizeObserver = new ResizeObserver(() => {
+            chart.resize();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+            chart.dispose();
+            chartRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        chartRef.current?.setOption(option);
+    }, [option]);
+    useEffect(() => {
+        if (!chartRef.current)
+            return;
+        if (loading) {
+            const maskColor = getComputedStyle(containerRef.current)
+                .getPropertyValue("--reltio-color-bg-white")
+                .trim();
+            chartRef.current.showLoading({ maskColor });
+        }
+        else {
+            chartRef.current.hideLoading();
+        }
+    }, [loading]);
+    const containerHeight = typeof height === "number" ? `${height}px` : height;
+    return (_jsx("div", { ref: containerRef, className: classNames(styles.root, className), style: { ...style, height: containerHeight }, ...rest }));
+};

package/charts/Chart/Chart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Chart.module.css.json';
+export default json;

package/charts/Chart/Chart.module.css.js

@@ -0,0 +1,8 @@
+import styleInject from 'style-inject';
+import json from './Chart.module.css.json';
+styleInject(`
+.Chart_root__L29wd {
+	width: 100%;
+}
+`);
+export default json;

package/charts/Chart/Chart.module.css.json

@@ -0,0 +1 @@
+{ "root": "Chart_root__L29wd" }

package/charts/Chart/Chart.types.d.ts

@@ -0,0 +1,24 @@
+import type { EChartsOption } from "echarts";
+import type { HtmlProps } from "../../utils/types";
+export type ChartProps = HtmlProps<"div", {
+    /**
+     * ECharts option object defining the chart content.
+     * Passed directly to chart.setOption().
+     */
+    option: EChartsOption;
+    /**
+     * Rendering engine. Read once at mount — changes after mount are ignored.
+     * @default "canvas"
+     */
+    renderer?: "canvas" | "svg";
+    /**
+     * Height of the chart container. Number values are treated as pixels.
+     * @default 300
+     */
+    height?: number | string;
+    /**
+     * When true, shows the ECharts built-in loading indicator.
+     * @default false
+     */
+    loading?: boolean;
+}>;

package/charts/Chart/Chart.types.js

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

package/charts/Chart/index.d.ts

@@ -0,0 +1,2 @@
+export { Chart, echarts } from "./Chart";
+export type { ChartProps } from "./Chart.types";

package/charts/Chart/index.js

@@ -0,0 +1 @@
+export { Chart, echarts } from "./Chart";

package/charts/Chart/theme.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Builds an ECharts theme object by reading --reltio-color-* CSS custom
+ * properties from the given DOM element. CSS custom properties inherit
+ * through the DOM tree, so the resolved values reflect the nearest
+ * ancestor's data-theme attribute (light or dark).
+ */
+export declare function buildTheme(element: HTMLElement): {
+    color: string[];
+    backgroundColor: string;
+    title: {
+        textStyle: {
+            color: string;
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        textStyle: {
+            color: string;
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    };
+};

package/charts/Chart/theme.js

@@ -0,0 +1,85 @@
+const TOKEN_NAMES = [
+    "primary",
+    "success",
+    "warning",
+    "orange",
+    "pink",
+    "purple",
+    "aqua-font",
+    "lime",
+    "error",
+];
+function getToken(styles, name) {
+    return styles.getPropertyValue(`--reltio-color-${name}`).trim();
+}
+/**
+ * Builds an ECharts theme object by reading --reltio-color-* CSS custom
+ * properties from the given DOM element. CSS custom properties inherit
+ * through the DOM tree, so the resolved values reflect the nearest
+ * ancestor's data-theme attribute (light or dark).
+ */
+export function buildTheme(element) {
+    const styles = getComputedStyle(element);
+    const colorPalette = TOKEN_NAMES.map((name) => getToken(styles, name));
+    return {
+        color: colorPalette,
+        backgroundColor: "transparent",
+        title: {
+            textStyle: {
+                color: getToken(styles, "text"),
+            },
+        },
+        legend: {
+            textStyle: {
+                color: getToken(styles, "text-secondary"),
+            },
+        },
+        tooltip: {
+            backgroundColor: getToken(styles, "bg-tooltip"),
+            borderColor: getToken(styles, "border-2"),
+            textStyle: {
+                color: getToken(styles, "text-forced-white"),
+            },
+        },
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisTick: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisLabel: {
+                color: getToken(styles, "text-secondary"),
+            },
+            splitLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-1"),
+                },
+            },
+        },
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisTick: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisLabel: {
+                color: getToken(styles, "text-secondary"),
+            },
+            splitLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-1"),
+                },
+            },
+        },
+    };
+}

package/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,2 @@
+import type { LineChartProps } from "./LineChart.types";
+export declare const LineChart: ({ data, xKey, series, height, units, loading, error, className, ...rest }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/LineChart/LineChart.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineChart as EChartsLine } from "echarts/charts";
+import { Chart, echarts } from "../../charts/Chart";
+import { classNames } from "../../utils/classNames";
+import styles from "./LineChart.module.css";
+echarts.use([EChartsLine]);
+const DEFAULT_HEIGHT = 300;
+const EMPTY_GRID_OPTION = {
+    xAxis: { type: "category" },
+    yAxis: {
+        type: "value",
+        min: 0,
+        max: 1000,
+        splitLine: { show: true },
+    },
+    series: [],
+    grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+    },
+};
+function formatWithUnits(value, units) {
+    if (!units)
+        return `${value}`;
+    return `${value} ${units}`;
+}
+function buildLineOption(data, xKey, series, units) {
+    const xLabels = typeof xKey === "function"
+        ? data.map(xKey)
+        : data.map((d) => d[xKey]);
+    return {
+        xAxis: {
+            type: "category",
+            data: xLabels,
+        },
+        yAxis: {
+            type: "value",
+            ...(units && {
+                axisLabel: {
+                    formatter: (value) => formatWithUnits(value, units),
+                },
+            }),
+        },
+        series: series.map((s) => ({
+            type: "line",
+            name: s.name ?? s.key,
+            data: data.map((d) => d[s.key]),
+        })),
+        tooltip: {
+            trigger: "axis",
+            ...(units && {
+                valueFormatter: (value) => formatWithUnits(value, units),
+            }),
+        },
+        legend: {
+            show: series.length > 1,
+            bottom: 0,
+        },
+        grid: {
+            left: "3%",
+            right: "4%",
+            bottom: series.length > 1 ? "10%" : "3%",
+            containLabel: true,
+        },
+    };
+}
+export const LineChart = ({ data, xKey, series, height = DEFAULT_HEIGHT, units, loading = false, error, className, ...rest }) => {
+    const hasData = Array.isArray(data) && data.length > 0;
+    const option = hasData && !error
+        ? buildLineOption(data, xKey, series, units)
+        : EMPTY_GRID_OPTION;
+    const overlay = error ? (_jsx("div", { className: classNames(styles.overlay, styles.errorOverlay), children: error })) : !hasData && !loading ? (_jsx("div", { className: styles.overlay, children: "No data" })) : null;
+    return (_jsxs("div", { className: classNames(styles.root, className), ...rest, children: [overlay, _jsx(Chart, { option: option, height: height, loading: loading })] }));
+};

package/charts/LineChart/LineChart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './LineChart.module.css.json';
+export default json;

package/charts/LineChart/LineChart.module.css.js

@@ -0,0 +1,25 @@
+import styleInject from 'style-inject';
+import json from './LineChart.module.css.json';
+styleInject(`
+.LineChart_root__L29wd {
+	position: relative;
+	width: 100%;
+}
+
+.LineChart_overlay__L29wd {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--reltio-color-text-secondary);
+	font-size: 14px;
+	z-index: 1;
+	pointer-events: none;
+}
+
+.LineChart_errorOverlay__L29wd {
+	color: var(--reltio-color-error-font);
+}
+`);
+export default json;

package/charts/LineChart/LineChart.module.css.json

@@ -0,0 +1 @@
+{ "root": "LineChart_root__L29wd", "overlay": "LineChart_overlay__L29wd", "errorOverlay": "LineChart_errorOverlay__L29wd" }

package/charts/LineChart/LineChart.types.d.ts

@@ -0,0 +1,38 @@
+import type { HtmlProps } from "../../utils/types";
+export type LineChartSeries = {
+    /** Data object key to plot as Y values */
+    key: string;
+    /** Legend label. Defaults to `key` if not provided. */
+    name?: string;
+};
+export type LineChartProps = HtmlProps<"div", {
+    /** Array of data objects. Each object represents one data point. */
+    data?: Record<string, unknown>[];
+    /**
+     * Determines X-axis labels.
+     * - **string**: property name for direct value lookup
+     * - **function**: custom extraction and formatting in one step
+     */
+    xKey: string | ((item: Record<string, unknown>) => string);
+    /** Data series to plot. Each entry renders one line. */
+    series: LineChartSeries[];
+    /**
+     * Height of the chart container. Number values are treated as pixels.
+     * @default 300
+     */
+    height?: number | string;
+    /**
+     * Shows the ECharts built-in loading overlay.
+     * - When `data` is empty: loading overlay on empty grid
+     * - When `data` is present: loading overlay on rendered chart
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Unit suffix appended to Y-axis labels and tooltip values.
+     * Examples: "ms", "%", " records"
+     */
+    units?: string;
+    /** Error message. When set, replaces the chart with centered error text. */
+    error?: string;
+}>;

package/charts/LineChart/LineChart.types.js

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

package/charts/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LineChartSeries } from "./LineChart.types";

package/charts/LineChart/index.js

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

package/charts/index.d.ts

@@ -0,0 +1 @@
+export * from "./LineChart";

package/charts/index.js

@@ -0,0 +1 @@
+export * from "./LineChart";

package/components/AssistantLoader/AssistantLoader.d.ts

@@ -1,7 +1,6 @@
 import type { AssistantLoaderProps } from "./AssistantLoader.types";
 /**
  * Displays a standardized loading indicator for assistant responses using a GIF animation.
- * Size is controlled via the `--reltio-assistant-loader-size` CSS variable (default: 32px).
  * Includes accessibility attributes (aria-busy, aria-label, role="status").
  */
-export declare const AssistantLoader: ({ className, ...rest }: AssistantLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantLoader: ({ className, size, style, ...rest }: AssistantLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/components/AssistantLoader/AssistantLoader.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../utils/classNames";
 import styles from "./AssistantLoader.module.css";
-const LOADING_GIF_SRC = "/icons/loading.gif";
+const LOADING_GIF_SRC = "https://reltio.design/icons/loading.gif";
 const DEFAULT_LABEL = "thinking";
 /**
  * Displays a standardized loading indicator for assistant responses using a GIF animation.
- * Size is controlled via the `--reltio-assistant-loader-size` CSS variable (default: 32px).
  * Includes accessibility attributes (aria-busy, aria-label, role="status").
  */
-export const AssistantLoader = ({ className, ...rest }) => {
+export const AssistantLoader = ({ className, size, style, ...rest }) => {
+    const rootStyle = {
+        ...style,
+        "--size": size ?? "32px",
+    };
     return (
     // biome-ignore lint/a11y/useSemanticElements: status role is correct for loading placeholder; output is for calculation results
-    _jsxs("div", { className: classNames(styles.root, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", ...rest, children: [_jsx("img", { src: LOADING_GIF_SRC, alt: "", className: styles.indicator, "aria-hidden": "true" }), _jsx("div", { className: classNames(styles.dotFlashing), "aria-hidden": "true" })] }));
+    _jsxs("div", { className: classNames(styles.root, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", style: rootStyle, ...rest, children: [_jsx("img", { src: LOADING_GIF_SRC, alt: "", className: classNames(styles.indicator), "aria-hidden": "true" }), _jsx("div", { className: classNames(styles.dotFlashing), "aria-hidden": "true" })] }));
 };

package/components/AssistantLoader/AssistantLoader.module.css.js

@@ -1,33 +1,7 @@
 import styleInject from 'style-inject';
 import json from './AssistantLoader.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root with --reltio-assistant-loader- prefix */
-._root_lj6wo_1 {
-	--reltio-assistant-loader-size: 32px;
-
-	/* Dot dimensions scale with size */
-	--reltio-assistant-loader-dot-size: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.25
-	);
-	--reltio-assistant-loader-dot-radius: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.15625
-	);
-	--reltio-assistant-loader-dot-color: #8d8dc8;
-	--reltio-assistant-loader-dot-color-dimmed: rgba(152, 128, 255, 0.2);
-	--reltio-assistant-loader-dot-gap: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.375
-	);
-	--reltio-assistant-loader-dot-margin-left: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.625
-	);
-	--reltio-assistant-loader-dot-duration: 1s;
-	--reltio-assistant-loader-dot-delay-middle: 0.5s;
-	--reltio-assistant-loader-dot-delay-last: 1s;
-
+.AssistantLoader_root__L29wd {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
@@ -35,65 +9,59 @@ styleInject(`
 	box-sizing: border-box;
 }
 
-/* GIF container - uses CSS variable for size with fallback */
-._indicator_lj6wo_36 {
-	width: var(--reltio-assistant-loader-size, 32px);
-	height: var(--reltio-assistant-loader-size, 32px);
+.AssistantLoader_indicator__L29wd {
+	width: var(--size);
+	height: var(--size);
 	display: block;
 	object-fit: contain;
 }
 
-/* Dot flashing indicator - uses CSS variables from .root */
-._dotFlashing_lj6wo_44 {
+.AssistantLoader_dotFlashing__L29wd {
 	position: absolute;
-	left: calc(
-		var(--reltio-assistant-loader-size, 32px) +
-		var(--reltio-assistant-loader-dot-margin-left, 20px)
-	);
+	left: calc(var(--size) * 1.625);
 	bottom: 20%;
 	transform: translateY(50%);
-	width: var(--reltio-assistant-loader-dot-size, 8px);
-	height: var(--reltio-assistant-loader-dot-size, 8px);
-	border-radius: var(--reltio-assistant-loader-dot-radius, 5px);
-	background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
-	animation: _dotFlashing_lj6wo_44 var(--reltio-assistant-loader-dot-duration, 1s)
-		infinite linear alternate;
-	animation-delay: var(--reltio-assistant-loader-dot-delay-middle, 0.5s);
+	width: calc(var(--size) * 0.25);
+	height: calc(var(--size) * 0.25);
+	border-radius: calc(var(--size) * 0.15625);
+	background-color: var(--reltio-color-primary-soft);
+	animation: AssistantLoader_dotFlashing__L29wd 1s infinite linear alternate;
+	animation-delay: 0.5s;
 }
 
-._dotFlashing_lj6wo_44::before,
-._dotFlashing_lj6wo_44::after {
+.AssistantLoader_dotFlashing__L29wd::before,
+.AssistantLoader_dotFlashing__L29wd::after {
 	content: "";
 	position: absolute;
 	top: 0;
 	display: block;
-	width: var(--reltio-assistant-loader-dot-size, 8px);
-	height: var(--reltio-assistant-loader-dot-size, 8px);
-	border-radius: var(--reltio-assistant-loader-dot-radius, 5px);
-	background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
-	animation: _dotFlashing_lj6wo_44 var(--reltio-assistant-loader-dot-duration, 1s)
-		infinite alternate;
+	width: calc(var(--size) * 0.25);
+	height: calc(var(--size) * 0.25);
+	border-radius: calc(var(--size) * 0.15625);
+	background-color: var(--reltio-color-primary-soft);
+	animation: AssistantLoader_dotFlashing__L29wd 1s infinite alternate;
 }
 
-._dotFlashing_lj6wo_44::before {
-	left: calc(-1 * var(--reltio-assistant-loader-dot-gap, 12px));
+.AssistantLoader_dotFlashing__L29wd::before {
+	left: calc(var(--size) * -0.375);
 	animation-delay: 0s;
 }
 
-._dotFlashing_lj6wo_44::after {
-	left: var(--reltio-assistant-loader-dot-gap, 12px);
-	animation-delay: var(--reltio-assistant-loader-dot-delay-last, 1s);
+.AssistantLoader_dotFlashing__L29wd::after {
+	left: calc(var(--size) * 0.375);
+	animation-delay: 1s;
 }
 
-@keyframes _dotFlashing_lj6wo_44 {
+@keyframes AssistantLoader_dotFlashing__L29wd {
 	0% {
-		background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
+		background-color: var(--reltio-color-primary-soft);
 	}
 	50%,
 	100% {
-		background-color: var(
-			--reltio-assistant-loader-dot-color-dimmed,
-			rgba(152, 128, 255, 0.2)
+		background-color: color-mix(
+			in srgb,
+			var(--reltio-color-primary-soft) 20%,
+			transparent
 		);
 	}
 }

package/components/AssistantLoader/AssistantLoader.module.css.json

@@ -1 +1 @@
-{ "root": "_root_lj6wo_1", "indicator": "_indicator_lj6wo_36", "dotFlashing": "_dotFlashing_lj6wo_44" }
+{ "root": "AssistantLoader_root__L29wd", "indicator": "AssistantLoader_indicator__L29wd", "dotFlashing": "AssistantLoader_dotFlashing__L29wd" }

package/components/AssistantLoader/AssistantLoader.types.d.ts

@@ -1,16 +1,8 @@
-import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the AssistantLoader component
  */
-export type AssistantLoaderProps = {
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Inline styles (e.g. for CSS variable overrides)
-     */
-    style?: React.CSSProperties & {
-        "--reltio-assistant-loader-size"?: string;
-    };
-} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;
+export type AssistantLoaderProps = HtmlProps<"div", {
+    /** Overall size of the loader (e.g. "32px", "2rem", "100%"). Defaults to 32px. */
+    size?: string;
+}>;

package/components/Button/Button.d.ts

@@ -6,4 +6,4 @@ import type { ButtonProps } from "./Button.types";
  * (filled, outlined, text), color options (primary, secondary, inherited),
  * sizes, states, and can render as either a button or anchor element.
  */
-export declare const Button: ({ variant, color, size, disabled, fullWidth, children, className, onClick, href, type, "aria-label": ariaLabel, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, color, size, disabled, fullWidth, children, className, href, type, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;