@epam/ai-dial-ui-kit 0.16.0-dev.46 → 0.16.0-dev.48

package/dist/src/components/New/Analytics/Bar/Bar.d.ts

@@ -0,0 +1,86 @@
+import { FC, ReactNode } from 'react';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsBarProps {
+    /**
+     * Current value used to size and color the bar. Pass `null` when there is no
+     * data (em dash, no progress bar). Omit it when `error` is set.
+     */
+    value?: number | null;
+    /** Upper bound of the scale. Defaults to `1`. */
+    maxValue?: number;
+    /**
+     * Renders the error state: the bar fills with the error color and an error tag
+     * replaces the value label.
+     */
+    error?: boolean;
+    /**
+     * Renders the loading state: a loader replaces the value label and the bar shows
+     * an empty track while the value is being fetched.
+     */
+    isLoading?: boolean;
+    /** Optional label rendered above the bar, on the left. */
+    title?: ReactNode;
+    /**
+     * Text rendered above the bar, on the right. Defaults to `value`, or an em dash
+     * (`—`) when `value` is `null`. Pass a formatted node (e.g. `"85%"`) to override.
+     */
+    valueLabel?: ReactNode;
+    /**
+     * Ordered list of color bands keyed by ratio (value / maxValue).
+     * Defaults to {@link DEFAULT_ANALYTICS_BAR_COLOR_MAP}.
+     */
+    colorMap?: AnalyticsBarColorStop[];
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /** Additional CSS classes for the title label. */
+    titleClassName?: string;
+    /** Additional CSS classes for the value label. */
+    valueClassName?: string;
+    /**
+     * Renders the bar on a single row: the title takes the left half and the bar
+     * with its value takes the right half. Defaults to the stacked layout.
+     */
+    inline?: boolean;
+    /** Accessible label for the bar. Falls back to the `title` when it is a string. */
+    ariaLabel?: string;
+}
+/**
+ * A compact analytics meter: a horizontal bar whose fill width and color reflect a
+ * value relative to `maxValue`, with an optional title on the left and value on the right.
+ * aliases: MetricBar|Meter|ScoreBar
+ * Design system 2.0
+ *
+ * The fill color is resolved from `colorMap` based on the normalized ratio
+ * (`value / maxValue`), so the bar shifts hue as the value grows. An empty bar
+ * (value `0`) shows only the `bg-layer-1` track. A missing value (`null`) shows
+ * an em dash and no progress bar.
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsBar title="Relevance" value={0.82} valueLabel="82%" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsBar
+ *   title="Score"
+ *   value={640}
+ *   maxValue={1000}
+ *   colorMap={customColorMap}
+ * />
+ * ```
+ *
+ * @param [value] - Current value used to size and color the bar. Pass `null` for no data (em dash, no bar). Omit when `error` is set.
+ * @param [maxValue=1] - Upper bound of the scale.
+ * @param [error] - Renders the error state (error-colored bar + error tag).
+ * @param [isLoading] - Renders the loading state (loader + empty track).
+ * @param [title] - Optional label rendered above the bar, on the left.
+ * @param [valueLabel] - Text rendered above the bar, on the right. Defaults to `value` or `—` when null.
+ * @param [colorMap=DEFAULT_ANALYTICS_BAR_COLOR_MAP] - Color bands keyed by ratio.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [titleClassName] - Additional CSS classes for the title label.
+ * @param [valueClassName] - Additional CSS classes for the value label.
+ * @param [inline] - Renders the title and bar on a single row (50% / 50%).
+ * @param [ariaLabel] - Accessible label for the bar.
+ */
+export declare const AnalyticsBar: FC<AnalyticsBarProps>;

package/dist/src/components/New/Analytics/BarGroup/BarGroup.d.ts

@@ -0,0 +1,103 @@
+import { FC, ReactNode } from 'react';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsBarGroupProps {
+    /** Title passed to the accordion header. */
+    title: ReactNode;
+    /** Tooltip shown when hovering the accordion header title. */
+    titleTooltip?: ReactNode;
+    /** Description passed to the accordion header. Defaults to the number of entries. */
+    description?: ReactNode;
+    /**
+     * Map of metric name to numeric value. Each entry renders one bar.
+     * Pass `null` for a key when there is no data (em dash, no progress bar).
+     */
+    data: Record<string, number | null>;
+    /**
+     * When provided, enables compare mode: keys are the union of `data` and
+     * `compareData`. Each entry renders two bars and, when both sides are numeric,
+     * a delta badge (`compareData[key] - data[key]`, three decimal places). A
+     * missing key (or explicit `null`) on either side shows an em dash with no
+     * progress bar and no delta. A rounded delta of `0` is omitted.
+     */
+    compareData?: Record<string, number | null>;
+    /**
+     * Labels shown next to each of the two bars in compare mode.
+     * The first label is for `data`, the second for `compareData`.
+     * Has no effect when `compareData` is not set.
+     */
+    compareLabels?: [ReactNode, ReactNode];
+    /** Upper bound passed to every bar. Defaults to the bar's own default (`1`). */
+    maxValue?: number;
+    /** Color map passed to every bar. */
+    colorMap?: AnalyticsBarColorStop[];
+    /** Whether the accordion is expanded initially. Defaults to `true`. */
+    defaultExpanded?: boolean;
+    /**
+     * Renders the group permanently expanded: the content is always visible and
+     * the accordion header has no toggle or chevron icon.
+     */
+    nonCollapsible?: boolean;
+    /** Renders a loader in place of the bars while the data is being fetched. */
+    isLoading?: boolean;
+    /**
+     * Invoked with the entry key and value when a bar is clicked. When set, each
+     * bar becomes an interactive button. In compare mode the whole entry (label,
+     * delta, both bars) is the click target.
+     */
+    onBarClick?: (key: string, value: number | null) => void;
+    /** Renders every bar on a single row (50% title, 50% bar + value). */
+    inline?: boolean;
+    /** Additional CSS classes for each bar's title label. */
+    barTitleClassName?: string;
+    /** Additional CSS classes for each bar's value label. */
+    barValueClassName?: string;
+    /**
+     * Additional CSS classes for each bar's outer container (e.g. for custom hover
+     * effects). In compare mode these classes apply to the shared container around
+     * both bars (one continuous block), and the entry wrapper is a Tailwind
+     * `group` — use `group-hover:` (not `hover:`) for pair hover. When `onBarClick`
+     * is set, that container also gets a default accent fill on group hover and
+     * `:focus-visible`.
+     */
+    barClassName?: string;
+    /** Map of bar key to tooltip content. When provided, hovering each bar shows its description. */
+    barDescriptions?: Record<string, ReactNode>;
+    /** Additional CSS classes for the accordion container. */
+    className?: string;
+}
+/**
+ * A collapsible group of analytics bars built from a key/value map. Wraps
+ * {@link Accordion}: the `title` is shown in the header, the number of entries
+ * is shown as the header description, and each entry renders a {@link AnalyticsBar}
+ * with the key as its title and the value as its value.
+ * aliases: MetricBarGroup|BarList|NumericResults
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsBarGroup
+ *   title="Relevance"
+ *   data={{ accuracy: 0.82, recall: 0.64, precision: 0.91 }}
+ * />
+ * ```
+ *
+ * @param title - Title passed to the accordion header.
+ * @param [titleTooltip] - Tooltip shown when hovering the accordion header title.
+ * @param [description] - Description passed to the accordion header. Defaults to the number of entries.
+ * @param data - Map of metric name to numeric value (or `null` when missing). Each entry renders one bar.
+ * @param [compareData] - Enables compare mode: union of keys, delta badge (`compareData − data`) when both sides are numeric and the rounded delta is non-zero, em dash (no bar) when a side is missing.
+ * @param [compareLabels] - Labels for the two bars in compare mode: first for `data`, second for `compareData`.
+ * @param [maxValue] - Upper bound passed to every bar.
+ * @param [colorMap] - Color map passed to every bar.
+ * @param [defaultExpanded=true] - Whether the accordion is expanded initially.
+ * @param [nonCollapsible] - Renders the group permanently expanded without a toggle or chevron.
+ * @param [isLoading] - Renders a loader in place of the bars while the data is being fetched.
+ * @param [onBarClick] - Invoked with the entry key and value when a bar (or, in compare mode, the whole entry) is clicked.
+ * @param [inline] - Renders every bar on a single row (50% title, 50% bar + value).
+ * @param [barTitleClassName] - Additional CSS classes for each bar's title label.
+ * @param [barValueClassName] - Additional CSS classes for each bar's value label.
+ * @param [barClassName] - Additional CSS classes for each bar's outer container. In compare mode they apply to the shared pair container (one continuous block); the entry is a Tailwind `group` — use `group-hover:` for pair hover; when `onBarClick` is set that container also gets a default accent fill on hover and `:focus-visible`.
+ * @param [barDescriptions] - Map of bar key to tooltip content. Hovering each bar shows its description.
+ * @param [className] - Additional CSS classes for the accordion container.
+ */
+export declare const AnalyticsBarGroup: FC<AnalyticsBarGroupProps>;

package/dist/src/components/New/Analytics/Card/Card.d.ts

@@ -0,0 +1,91 @@
+import { FC, ReactNode } from 'react';
+import { AnalyticsCardCompareItem } from '../../../../models/analytics';
+import { AnalyticsCardVariant } from '../../../../types/analytics';
+export interface AnalyticsCardProps {
+    title: ReactNode;
+    value?: ReactNode;
+    description?: ReactNode;
+    variant?: AnalyticsCardVariant;
+    /** Renders an error tag in place of the value when the value is unavailable. */
+    error?: boolean;
+    /** Renders a loader in place of the value while the value is being fetched. */
+    isLoading?: boolean;
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /**
+     * When provided, shows a delta badge next to the title.
+     * Values ≥ 0 use `bg-success text-success`; negative values use error styles.
+     * Positive values are prefixed with `+`.
+     */
+    delta?: number;
+    /**
+     * Overrides the automatic sign-based style of the delta badge.
+     * Use when a positive delta is semantically bad (e.g. response time went up)
+     * or a negative delta is semantically good (e.g. error rate went down).
+     * When omitted, `delta ≥ 0` → success, `delta < 0` → error.
+     */
+    deltaPositive?: boolean;
+    /**
+     * Suffix appended to the formatted delta with no space (e.g. `"s"` → `+9s`,
+     * `-19s`). Any string is valid (`s`, `ms`, `%`).
+     */
+    deltaUnit?: string;
+    /**
+     * When provided, enables compare mode: the value area is split 50/50 with a
+     * vertical divider and each side shows its own sub-title and value.
+     * `value` is ignored when `compareValues` is set.
+     */
+    compareValues?: [AnalyticsCardCompareItem, AnalyticsCardCompareItem];
+}
+/**
+ * A simple analytics summary card that displays a single metric as a title,
+ * a prominent value, and an optional description.
+ * aliases: MetricCard|StatCard|KpiCard
+ * Design system 2.0
+ *
+ * Two visual variants are available via the {@link AnalyticsCardVariant} enum:
+ * - `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.
+ * - `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no
+ *   description (the `description` prop is ignored in this variant).
+ *
+ * **Compare mode** — pass `compareValues` to split the value area 50/50 between two
+ * metrics, each with its own sub-title. Long sub-titles truncate to a single line and
+ * show the full text in a tooltip. Pair with `delta` to show a change badge next
+ * to the card title, and `deltaUnit` for a suffix such as `"s"`.
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsCard
+ *   title="Total requests"
+ *   value="12,480"
+ *   description="+12% vs last week"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsCard
+ *   title="Response time"
+ *   delta={9}
+ *   deltaUnit="s"
+ *   deltaPositive={false}
+ *   compareValues={[
+ *     { title: 'This week', value: '248ms' },
+ *     { title: 'Last week', value: '220ms' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param title - Short label describing the metric, rendered above the value.
+ * @param [value] - The primary metric value. Ignored when `compareValues` is set.
+ * @param [description] - Optional supporting text. Ignored when `variant` is `Compact`.
+ * @param [variant=AnalyticsCardVariant.Default] - Visual style of the card.
+ * @param [error] - Renders an error tag in place of the value.
+ * @param [isLoading] - Renders a loader in place of the value.
+ * @param [className] - Additional CSS classes for the card container.
+ * @param [delta] - Numeric change shown as a badge next to the title. ≥0 = success, <0 = error.
+ * @param [deltaPositive] - Overrides sign-based badge colour. Use for lower-is-better metrics.
+ * @param [deltaUnit] - Suffix appended to the formatted delta (e.g. `"s"` → `+9s`).
+ * @param [compareValues] - Enables compare mode with two side-by-side metrics.
+ */
+export declare const AnalyticsCard: FC<AnalyticsCardProps>;

package/dist/src/components/New/Analytics/Histogram/Histogram.d.ts

@@ -0,0 +1,59 @@
+import { FC, ReactNode } from 'react';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsHistogramProps {
+    /** Title rendered above the histogram. */
+    title: ReactNode;
+    /** Values to distribute across the columns. */
+    values: number[];
+    /**
+     * Ordered color bands defining the columns (and their colors), keyed by value.
+     * Defaults to {@link DEFAULT_ANALYTICS_BAR_COLOR_MAP}.
+     */
+    colorMap?: AnalyticsBarColorStop[];
+    /** Noun used in the hover tooltip: `"{n} out of {k} {valueTitle}"`. */
+    valueTitle?: string;
+    /** When `true`, renders each column's count inside its bar. */
+    showCount?: boolean;
+    /** Renders a loader in place of the histogram while the data is being fetched. */
+    isLoading?: boolean;
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /** Second set of values to overlay in compare mode. Primary bars are striped; compare bars are solid. */
+    compareValues?: number[];
+    /** Label for the primary values set, shown on the first tooltip line in compare mode. */
+    valueSetLabel?: string;
+    /** Label for the compare values set, shown on the first tooltip line in compare mode. */
+    compareValueSetLabel?: string;
+}
+/**
+ * A histogram that distributes `values` across the bands of a color map and draws a
+ * column per band. Each column's height is relative to the Y-axis max (an even
+ * ceiling of the dataset size — the "out of N" in the tooltip). Empty columns
+ * are outlined, populated columns are filled with their band color. A left
+ * Y-axis (count) and horizontal grid lines provide scale; interval labels run
+ * along the bottom. Hovering a column reveals a tooltip with its share of the
+ * total.
+ * aliases: Distribution|ColumnChart|FrequencyChart
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsHistogram
+ *   title="Score distribution"
+ *   values={[0.1, 0.15, 0.4, 0.42, 0.43, 0.9, 1]}
+ *   valueTitle="responses"
+ * />
+ * ```
+ *
+ * @param title - Title rendered above the histogram.
+ * @param values - Values to distribute across the columns.
+ * @param [colorMap=DEFAULT_ANALYTICS_BAR_COLOR_MAP] - Color bands defining the columns.
+ * @param [valueTitle='values'] - Noun used in the hover tooltip.
+ * @param [showCount] - When `true`, renders each column's count inside its bar.
+ * @param [isLoading] - Renders a loader in place of the histogram while the data is being fetched.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [compareValues] - Second set of values; enables compare mode (primary striped, compare solid).
+ * @param [valueSetLabel] - Label for the primary values set (compare mode tooltip).
+ * @param [compareValueSetLabel] - Label for the compare values set (compare mode tooltip).
+ */
+export declare const AnalyticsHistogram: FC<AnalyticsHistogramProps>;

package/dist/src/components/New/LabelledText/LabelledText.d.ts

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface LabelledTextProps {
+    /** Small caption above the value, naming it. */
+    label: ReactNode;
+    /** The value. Truncates with an ellipsis, revealing the full text in a tooltip only when clipped. */
+    text?: ReactNode;
+    /** Tooltip content shown instead of `text` while it is clipped. */
+    tooltip?: ReactNode;
+    /** Custom value content, rendered instead of `text`. */
+    children?: ReactNode;
+    /** Element after the value, e.g. a copy button. */
+    postfix?: ReactNode;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * A read-only label/value pair: a small caption above a value.
+ * aliases: LabelValue|DisplayText|ReadOnlyField|KeyValue
+ * Design system 2.0
+ *
+ * The caption is the kit's `Label`, so it matches the other 2.0 fields. There is
+ * no control to point its `htmlFor` at: it sits beside the value and reads in
+ * DOM order. It is not a form field: use `Label` with an input for editable
+ * values.
+ *
+ * Without `children` the value is a single line capped at 200px that truncates;
+ * the tooltip appears only while the text is actually clipped. With `children`
+ * the value takes the content's own width.
+ *
+ * @example
+ * ```tsx
+ * <LabelledText label="Endpoint" text="https://example.com/v1/chat" />
+ *
+ * <LabelledText
+ *   label="Key"
+ *   text="sk-0000"
+ *   postfix={<IconButton icon={<IconCopy />} ariaLabel="Copy key" />}
+ * />
+ * ```
+ *
+ * @param label - Caption above the value.
+ * @param [text] - The value, truncated with an ellipsis when it does not fit.
+ * @param [tooltip] - Tooltip content used instead of `text` while it is clipped.
+ * @param [children] - Custom value content, rendered instead of `text`.
+ * @param [postfix] - Element after the value.
+ * @param [className] - Additional CSS classes for the root element.
+ */
+export declare const LabelledText: FC<LabelledTextProps>;

package/dist/src/constants/public-class-names.d.ts

@@ -32,6 +32,16 @@ export declare const DIAL_KIT_CLASS: {
     readonly errorText: "dial-kit-error-text";
     /** The `Label` root, which wraps the `label` element and its info button. */
     readonly label: "dial-kit-label";
+    /** The root of a `LabelledText`, wrapping its caption and value. */
+    readonly labelledText: "dial-kit-labelled-text";
+    /** The root of an `AnalyticsCard`: the box holding its title, value and description. */
+    readonly analyticsCard: "dial-kit-analytics-card";
+    /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */
+    readonly analyticsBar: "dial-kit-analytics-bar";
+    /** The root of an `AnalyticsBarGroup`: its accordion, header and bars. */
+    readonly analyticsBarGroup: "dial-kit-analytics-bar-group";
+    /** The root of an `AnalyticsHistogram`: its title, axis and columns. */
+    readonly analyticsHistogram: "dial-kit-analytics-histogram";
     /** The `article` element of a `CardShell`. */
     readonly cardShell: "dial-kit-card-shell";
     /** The `aside` element of a `CollapsibleSidebar`. */

package/dist/src/index.d.ts

@@ -124,7 +124,17 @@ export type { MultiSelectTagsProps } from './components/New/Select/MultiSelectTa
 export { InfoButton } from './components/New/InfoButton/InfoButton';
 export type { InfoButtonProps } from './components/New/InfoButton/InfoButton';
 export type { LabelProps } from './components/New/Label/Label';
+export { AnalyticsCard } from './components/New/Analytics/Card/Card';
+export type { AnalyticsCardProps } from './components/New/Analytics/Card/Card';
+export { AnalyticsBar } from './components/New/Analytics/Bar/Bar';
+export type { AnalyticsBarProps } from './components/New/Analytics/Bar/Bar';
+export { AnalyticsBarGroup } from './components/New/Analytics/BarGroup/BarGroup';
+export type { AnalyticsBarGroupProps } from './components/New/Analytics/BarGroup/BarGroup';
+export { AnalyticsHistogram } from './components/New/Analytics/Histogram/Histogram';
+export type { AnalyticsHistogramProps } from './components/New/Analytics/Histogram/Histogram';
 export { Label } from './components/New/Label/Label';
+export type { LabelledTextProps } from './components/New/LabelledText/LabelledText';
+export { LabelledText } from './components/New/LabelledText/LabelledText';
 export { Textarea, TextareaResize } from './components/New/Textarea/Textarea';
 export { Input } from './components/New/Input/Input';
 export type { InputProps } from './components/New/Input/Input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.46",
+  "version": "0.16.0-dev.48",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",