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

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

@@ -1,86 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsBarProps {
-    /**
-     * 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 1.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
- * <DialAnalyticsBar title="Relevance" value={0.82} valueLabel="82%" />
- * ```
- *
- * @example
- * ```tsx
- * <DialAnalyticsBar
- *   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 DialAnalyticsBar: FC<DialAnalyticsBarProps>;

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

@@ -1,103 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsBarGroupProps {
-    /** 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 DialAccordion}: the `title` is shown in the header, the number of entries
- * is shown as the header description, and each entry renders a {@link DialAnalyticsBar}
- * with the key as its title and the value as its value.
- * aliases: MetricBarGroup|BarList|NumericResults
- * Design system 1.0
- *
- * @example
- * ```tsx
- * <DialAnalyticsBarGroup
- *   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 DialAnalyticsBarGroup: FC<DialAnalyticsBarGroupProps>;

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

@@ -1,91 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AnalyticsCardCompareItem } from '../../../models/analytics';
-import { AnalyticsCardVariant } from '../../../types/analytics';
-export interface DialAnalyticsCardProps {
-    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 1.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
- * <DialAnalyticsCard
- *   title="Total requests"
- *   value="12,480"
- *   description="+12% vs last week"
- * />
- * ```
- *
- * @example
- * ```tsx
- * <DialAnalyticsCard
- *   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 DialAnalyticsCard: FC<DialAnalyticsCardProps>;

package/dist/src/components/Analytics/ErrorTag/ErrorTag.d.ts

@@ -1,22 +0,0 @@
-import { FC } from 'react';
-export interface DialAnalyticsErrorTagProps {
-    /** Text shown inside the tag. Defaults to `'Error'`. */
-    label?: string;
-    /** Additional CSS classes applied to the tag. */
-    className?: string;
-}
-/**
- * A non-interactive error tag used across analytics components to indicate that a
- * Design system 1.0
- * metric value could not be provided. Renders a {@link DialTag} styled with the
- * error palette (`bg-error`, `text-error`, `border-error`).
- *
- * @example
- * ```tsx
- * <DialAnalyticsErrorTag />
- * ```
- *
- * @param [label='Error'] - Text shown inside the tag.
- * @param [className] - Additional CSS classes applied to the tag.
- */
-export declare const DialAnalyticsErrorTag: FC<DialAnalyticsErrorTagProps>;

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

@@ -1,59 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsHistogramProps {
-    /** 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 1.0
- *
- * @example
- * ```tsx
- * <DialAnalyticsHistogram
- *   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 DialAnalyticsHistogram: FC<DialAnalyticsHistogramProps>;

package/dist/src/components/Analytics/index.d.ts

@@ -1,13 +0,0 @@
-export { DialAnalyticsCard } from './Card/Card';
-export type { DialAnalyticsCardProps } from './Card/Card';
-export { AnalyticsCardVariant } from '../../types/analytics';
-export { DialAnalyticsBar } from './Bar/Bar';
-export type { DialAnalyticsBarProps } from './Bar/Bar';
-export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './Bar/utils';
-export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from '../../models/analytics';
-export { DialAnalyticsErrorTag } from './ErrorTag/ErrorTag';
-export type { DialAnalyticsErrorTagProps } from './ErrorTag/ErrorTag';
-export { DialAnalyticsBarGroup } from './BarGroup/BarGroup';
-export type { DialAnalyticsBarGroupProps } from './BarGroup/BarGroup';
-export { DialAnalyticsHistogram } from './Histogram/Histogram';
-export type { DialAnalyticsHistogramProps } from './Histogram/Histogram';

package/dist/src/components/Steps/Step.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { Step } from '../../models/step';
-export interface DialStepProps {
-    step: Step;
-    index: number;
-    currentStep: string;
-    onChangeStep: (step: string) => void;
-}
-export declare const DialStep: FC<DialStepProps>;

package/dist/src/components/Steps/Steps.d.ts

@@ -1,26 +0,0 @@
-import { FC } from 'react';
-import { Step } from '../../models/step';
-export interface DialStepsProps {
-    steps: Step[];
-    currentStep: string;
-    onChangeStep: (step: string) => void;
-}
-/**
- * Props for the DialSteps component, which renders a multi-step navigation UI.
- * aliases: StepWizard|ProgressSteps
- * Design system 1.0
- *
- * @example
- * ```tsx
- * <DialSteps
- *   steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}
- *   currentStep="step1"
- *   onChangeStep={(step) => console.log(step)}
- * />
- * ```
- *
- * @param steps - Array of step objects to display
- * @param currentStep - The id of the currently active step
- * @param onChangeStep - Callback to set the current step by id
- */
-export declare const DialSteps: FC<DialStepsProps>;

package/dist/src/components/Steps/utils.d.ts

@@ -1,3 +0,0 @@
-import { Step } from '../../models/step';
-export declare const getStepClass: (step: Step, currentStepId: string) => "border-accent-secondary text-primary" | "border-red-900 text-primary" | "border-accent-primary text-primary" | "border-primary text-primary" | "border-red-900 text-error" | "border-primary text-secondary";
-export declare const getCircleClass: (step: Step, currentStepId: string) => "bg-accent-secondary" | "bg-red-400" | "bg-accent-primary" | "bg-layer-4";