@epam/ai-dial-ui-kit 0.12.0-dev.8 → 0.12.0

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

@@ -0,0 +1,80 @@
+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;
+    /**
+     * 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
+ *
+ * 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. Pair with `delta` to show a change badge next
+ * to the card title.
+ *
+ * @example
+ * ```tsx
+ * <DialAnalyticsCard
+ *   title="Total requests"
+ *   value="12,480"
+ *   description="+12% vs last week"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <DialAnalyticsCard
+ *   title="Response time"
+ *   delta={12}
+ *   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 [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

@@ -0,0 +1,21 @@
+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
+ * 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

@@ -0,0 +1,56 @@
+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. Each column renders as a paired striped bar. */
+    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 most populated band; empty
+ * columns are outlined, populated columns are filled with their band color. A baseline
+ * separates the columns from the interval labels, and hovering a column reveals a
+ * tooltip with its share of the total.
+ * aliases: Distribution|ColumnChart|FrequencyChart
+ *
+ * @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 with paired striped columns.
+ * @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/Histogram/utils.d.ts

@@ -0,0 +1,39 @@
+import { AnalyticsBarColorStop } from '../../../models/analytics';
+/** Fill color for the zero-bucket column (values of exactly `0`). */
+export declare const ZERO_BUCKET_COLOR = "#FF4E50";
+export interface AnalyticsHistogramColumn {
+    /** Lower bound of the column's interval. */
+    from: number;
+    /** Upper bound of the column's interval. */
+    to: number;
+    /** Fill color for the column, or `undefined` for the empty zero bucket. */
+    color?: string;
+    /** Number of values that fall into this column's interval. */
+    count: number;
+    /** Column height as a ratio of the tallest column (0–1). */
+    ratio: number;
+    /** Whether this is the leading empty bucket for values of exactly `0`. */
+    isZeroBucket: boolean;
+}
+/**
+ * Returns the index of the color-map band a positive value belongs to, or `-1`
+ * when no band matches (including an empty map or a value of `0`, which is handled
+ * by the dedicated zero bucket). A band's lower bound is exclusive and its upper
+ * bound inclusive, so boundary values belong to the lower band; the last matching
+ * band wins, which lets an exact full band (`{ from: 1, to: 1 }`) capture the maximum.
+ */
+export declare const getHistogramColumnIndex: (value: number, colorMap: AnalyticsBarColorStop[]) => number;
+/**
+ * Builds the histogram columns: a leading empty zero bucket (values of exactly `0`)
+ * followed by one column per color-map band. Counts how many `values` fall into each
+ * column and computes each column's height as a ratio of the tallest column.
+ */
+export declare const buildHistogramColumns: (values: number[], colorMap: AnalyticsBarColorStop[]) => AnalyticsHistogramColumn[];
+/** Formats a column's interval bound for the axis label (trims float noise). */
+export declare const formatHistogramInterval: (value: number) => string;
+/**
+ * Builds the legend label for a column: a single number for an exact band
+ * (`from === to`, e.g. the full band), otherwise a `from-to` range.
+ * For the default map this yields `0-0.1, 0.1-0.2, …, 0.9-1, 1`.
+ */
+export declare const formatHistogramColumnLabel: (from: number, to: number) => string;

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

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

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

@@ -0,0 +1,13 @@
+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/Breadcrumb/BreadcrumbItem.d.ts

@@ -8,6 +8,7 @@ export interface DialBreadcrumbItemProps extends Omit<HTMLAttributes<HTMLLIEleme
     iconBefore?: ReactNode;
     labelClassName?: string;
     isLast?: boolean;
+    isFirst?: boolean;
     separator?: ReactNode;
     onBeforeNavigate?: NavigationGuard;
 }

package/dist/src/components/Breadcrumb/constants.d.ts

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
 export declare const breadcrumbBaseClassName = "w-full overflow-hidden";
 export declare const breadcrumbListClassName = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap";
-export declare const breadcrumbItemBaseClassName = "flex items-center gap-2 min-w-0 dial-small-text";
-export declare const breadcrumbItemVisibleClassName = "shrink-0 max-w-[30%]";
-export declare const breadcrumbItemLastClassName = "flex-1 min-w-0";
+export declare const breadcrumbItemBaseClassName = "flex items-center gap-2 dial-small-text";
+export declare const breadcrumbItemWidthClassName: Record<'first' | 'middle' | 'last', string>;
 export declare const breadcrumbLinkBaseClassName = "flex flex-1 items-center gap-1 min-w-0 transition-colors";
 export declare const breadcrumbLinkInteractiveClassName = "text-secondary hover:text-accent-primary";
 export declare const breadcrumbCurrentClassName = "text-primary cursor-default";

package/dist/src/components/ConfirmationPopup/constants.d.ts

@@ -1,7 +1,7 @@
 import { ButtonAppearance, ButtonVariant } from '../../types/button';
 import { ConfirmationPopupVariant } from '../../types/confirmation-popup';
 export declare const actionsBaseClassName = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary";
-export declare const descriptionBaseClassName = "text-secondary dial-small-150 px-6 py-4";
+export declare const descriptionBaseClassName = "text-secondary dial-small-text px-6 pb-4";
 export declare const defaultCancelLabel = "Cancel";
 export declare const defaultConfirmLabel = "Ok";
 export declare const variantConfig: Record<ConfirmationPopupVariant, {

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

@@ -22,6 +22,8 @@ export interface DialDropdownProps {
     closable?: boolean;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
+    overlayContentClassName?: string;
+    separatorClassName?: string;
     listClassName?: string;
     outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
     outsideClosable?: boolean;

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

@@ -164,6 +164,7 @@ export interface DialFileManagerProps {
     fileTooLargeTooltip?: string;
     unsupportedFileTypeTooltip?: string;
     onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
+    prepareUploadFileName?: (name: string) => string;
     onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
     maxFileSize?: number;
     uploadValidationMessages?: FileUploadValidationMessages;
@@ -286,6 +287,7 @@ export interface DialFileManagerProps {
  *
  * @param [onUploadArchive] - Callback fired when archive files are uploaded
  * @param [onUploadFiles] - Callback fired when files are uploaded
+ * @param [prepareUploadFileName] - Optional mapper applied to each uploaded item's name before conflict resolution runs and before `onUploadFiles`/`onUploadArchive` are called. Use it to sanitize or normalize names (e.g. stripping forbidden symbols). Conflict detection is performed against the mapped names, so renames take place before the conflict check.
  * @param [onValidateUpload] - Callback to validate files before upload
  * @param [maxFileSize] - Maximum allowed file size for uploads in bytes
  * @param [uploadValidationMessages] - Custom validation messages for file uploads. Consumers can customize these strings for a11y and copy consistency.

package/dist/src/components/FileManager/errors.d.ts

@@ -1,3 +1,6 @@
 export declare const DEFAULT_WARNINGS: {
     hiddenItemWarning: string;
 };
+export declare const DEFAULT_ERRORS: {
+    consecutiveDotsError: string;
+};

package/dist/src/components/FileManager/hooks/use-file-upload.d.ts

@@ -34,9 +34,10 @@ export interface UseFileUploadOptions {
     allowedFileTypes?: DialFileAcceptType[];
     validationMessages?: FileUploadValidationMessages;
     onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
+    prepareUploadFileName?: (name: string) => string;
     currentFolder?: DialFile;
 }
-export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, allowedFileTypes, validationMessages, onUploadArchive, uploadEnabled, currentFolder, }?: UseFileUploadOptions) => {
+export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, allowedFileTypes, validationMessages, onUploadArchive, prepareUploadFileName, uploadEnabled, currentFolder, }?: UseFileUploadOptions) => {
     isDragging: boolean;
     isDraggingOverWindow: boolean;
     uploadError: string | undefined;

package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts

@@ -4,6 +4,7 @@ export interface FolderCreationValidationMessages {
     emptyName?: string;
     duplicateName?: string;
     hiddenItemWarning?: string;
+    consecutiveDotsError?: string;
 }
 export interface UseFolderCreationProps {
     currentFolder?: DialFile;

package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts

@@ -4,6 +4,7 @@ export interface RenameValidationMessages {
     emptyName?: string;
     duplicateName?: string;
     hiddenItemWarning?: string;
+    consecutiveDotsError?: string;
 }
 export declare const useItemRenaming: ({ items, onRenameValidate, validationMessages, onMoveToFiles, }: {
     items?: DialFile[];

package/dist/src/components/InfoButton/constants.d.ts

@@ -1 +1 @@
-export declare const infoButtonClassName = "w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active focus-within:border-focus";
+export declare const infoButtonClassName = "w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active";

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

@@ -8,6 +8,7 @@ export interface DialRadioGroupProps {
     radioButtons: RadioButtonWithContent[];
     activeRadioButton: string;
     orientation: RadioGroupOrientation;
+    labelDescription?: string;
     onChange: (radioId: string) => void;
     radioClassName?: string;
     groupLabelClassName?: string;
@@ -55,6 +56,7 @@ export interface DialRadioGroupProps {
  * @param [selectedLabelClassName] - Additional classes applied to the selected option's label
  * @param [radioGroupClassName] - Additional classes applied to the radio group container
  * @param [disabled] - Disables all child radios when set
+ * @param [labelDescription] - Optional description rendered by `DialFormItem`
  * @param radioButtons - Array of options with ids, labels, and optional content
  * @param activeRadioButton - The id of the currently selected radio
  * @param orientation - Layout direction of radios: row or column

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

@@ -53,6 +53,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialLabelProps, 'label'
  * @param [selectedValue] - Current value id used to resolve the displayed option name
  * @param radioButtons - Collection of radio options (id/name)
  * @param [customInputValue] - Custom value text to display instead of a radio option name
+ * @param [placeholder] - Placeholder text shown in the field when no value is selected; unlike `emptyValueText`, it suppresses the tooltip
  * @param [valueClassName] - Extra classes applied to the value text in the collapsed field
  * @param [inputClassName] - Extra classes applied to the collapsed input container
  * @param emptyValueText - Placeholder text when no value is selected

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

@@ -24,5 +24,6 @@ import { DialSchemaRendererProps } from './types';
  * @param [onChange] - Called with the full form value on every change
  * @param [onPropertyChange] - Called with `(path, value)` for each individual property change
  * @param [onDefaultValues] - Called once on mount with the resolved default values
+ * @param [jsonEditorTheme] - Theme for the JSON editor shown for value keys absent from the schema
  */
 export declare const DialSchemaRenderer: FC<DialSchemaRendererProps>;

package/dist/src/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { EditorThemes } from '../../../types/editor';
+export interface SchemaAdditionalPropertiesEditorProps {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    theme?: EditorThemes;
+    height?: number;
+}
+/**
+ * Renders a single value key that is not declared in the schema's `properties` as a raw JSON
+ * editor, letting users inspect and manually edit it. The Monaco-based editor is dynamically
+ * imported on the client only, keeping the parent SchemaRenderer SSR-safe.
+ * aliases: SchemaExtraPropertyEditor|SchemaUnknownPropertyEditor
+ *
+ * @param value - The current value of the property (any JSON type)
+ * @param onChange - Called with the parsed value whenever the edited JSON is valid
+ * @param [theme=EditorThemes.dark] - Theme applied to the JSON editor
+ * @param [height=240] - Editor height in pixels
+ */
+export declare const SchemaAdditionalPropertiesEditor: FC<SchemaAdditionalPropertiesEditorProps>;

package/dist/src/components/SchemaRenderer/context.d.ts

@@ -1,11 +1,14 @@
 import { default as React } from 'react';
 import { JsonSchema, JsonSchemaDef, SchemaRendererTexts } from './types';
+import { EditorThemes } from '../../types/editor';
 interface SchemaRendererContextValue {
     rootSchema: JsonSchema;
     texts: SchemaRendererTexts;
     readonly?: boolean;
     defaultExpanded?: boolean;
     inputClassName?: string;
+    jsonEditorTheme?: EditorThemes;
+    acceptableResourceTypes?: Record<string, unknown>;
     renderField?: (path: string[], schema: JsonSchemaDef, defaultElement: React.ReactElement) => React.ReactNode;
     touchedPaths?: ReadonlySet<string>;
     markTouched?: (path: string) => void;

package/dist/src/components/SchemaRenderer/types.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { EditorThemes } from '../../types/editor';
 export declare enum SchemaRendererVariant {
     Sections = "sections",
     Flat = "flat",
@@ -46,6 +47,7 @@ export interface JsonSchemaDef {
     };
     'dial:meta'?: Record<string, unknown>;
     'dial:resource'?: boolean;
+    acceptableResourceTypes?: string[];
     [key: string]: unknown;
 }
 export interface JsonSchema extends JsonSchemaDef {
@@ -94,6 +96,18 @@ export interface DialSchemaRendererProps {
      * with a field. When `false` (default), all unfilled required fields are highlighted immediately.
      */
     skipUntouched?: boolean;
+    /**
+     * Theme applied to the JSON editor shown for value keys that are not declared in the
+     * schema's `properties`. Defaults to `EditorThemes.dark`.
+     */
+    jsonEditorTheme?: EditorThemes;
+    /**
+     * Live resource options for schema properties flagged with `dial:resource: true`.
+     * Keyed by the resource type name referenced in a property's `acceptableResourceTypes`
+     * array; each value provides the selectable entries for that resource type (a string
+     * array for string-typed properties).
+     */
+    acceptableResourceTypes?: Record<string, unknown>;
     onChange?: (value: Record<string, unknown>) => void;
     onPropertyChange?: (path: string, value: unknown) => void;
     onDefaultValues?: (value: Record<string, unknown>) => void;

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

@@ -0,0 +1,39 @@
+import { SegmentedControlOption } from '../../models/segmented-control';
+export interface DialSegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+}
+/**
+ * A single-select control for switching between a small set of mutually exclusive,
+ * equally-sized options (e.g. view switchers).
+ * aliases: SegmentedButton|ViewSwitcher
+ *
+ * Renders a horizontal group of segments where every option is always visible and
+ * equally sized. Supports 2 or more segments, optional per-option icons, and
+ * keyboard navigation (Arrow keys, Home, End).
+ *
+ * @example
+ * ```tsx
+ * <DialSegmentedControl
+ *   ariaLabel="View"
+ *   value={view}
+ *   onChange={setView}
+ *   options={[
+ *     { value: 'list', label: 'List' },
+ *     { value: 'grid', label: 'Grid' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param options - Segments to render. Each option needs a unique `value` and may include a `label`, `icon`, and `disabled` flag.
+ * @param value - The currently selected option `value`.
+ * @param onChange - Callback fired with the selected option `value`.
+ * @param [disabled] - Disables the entire control when set.
+ * @param [className] - Additional classes applied to the container.
+ * @param [ariaLabel] - Accessible label for the control (applied to the `tablist`).
+ */
+export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SegmentedControl/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const containerBaseClassName = "inline-flex items-center rounded bg-layer-3";
+export declare const segmentBaseClassName = "flex flex-1 items-center justify-center gap-2 h-7 px-3 py-1 border border-primary dial-small-text whitespace-nowrap focus-visible:outline outline-offset-0 focus-visible:relative focus-visible:z-10";
+export declare const segmentSelectedClassName = "relative z-10 bg-controls-accent-primary-alpha-active text-primary";
+export declare const segmentUnselectedClassName = "text-secondary hover:text-primary";
+export declare const segmentDisabledClassName = "text-controls-disable-accent cursor-not-allowed hover:text-controls-disable-accent";

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

@@ -1,6 +1,7 @@
 import { FC, ReactNode, MouseEvent, Ref } from 'react';
 import { SelectOption } from '../../models/select';
 import { SelectSize, SelectVariant } from '../../types/select';
+import { ElementSize } from '../../types/size';
 export interface DialSelectProps {
     options: SelectOption[];
     multiple?: boolean;
@@ -13,6 +14,7 @@ export interface DialSelectProps {
     defaultValue?: string | string[];
     placeholder?: string;
     searchable?: boolean;
+    searchSize?: ElementSize;
     searchPlaceholder?: string;
     selectAll?: boolean;
     selectAllLabel?: string;
@@ -71,6 +73,7 @@ export interface DialSelectProps {
  * @param [defaultValue] - Uncontrolled initial selected value(s).
  * @param [placeholder="Select..."] - Placeholder text when no selection is made.
  * @param [searchable=false] - Show a search field in the overlay header.
+ * @param [searchSize=ElementSize.Standard] - Size of the overlay search input when `searchable` is enabled.
  * @param [searchPlaceholder] - Placeholder for the search input (overlay/inline).
  * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
  * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.

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

@@ -1,10 +1,12 @@
 import { FC, HTMLAttributes } from 'react';
+import { DialLabelProps } from '../Label/Label';
 export interface DialSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value: number;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
+    labelProps?: DialLabelProps;
     /** 2-element or 3-element label tuple rendered below the track */
     labels?: [string, string] | [string, string, string];
     /** Custom formatter for the thumb value; defaults to fixed-decimal based on step */
@@ -41,6 +43,7 @@ export interface DialSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
  * @param [max=1] - Maximum value
  * @param [step=0.1] - Step increment
  * @param [disabled=false] - Disables interaction
+ * @param [labelProps] - Props forwarded to DialLabel rendered above the slider
  * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
  * @param [formatValue] - Custom value formatter for the thumb display
  * @param [onChange] - Callback fired with the new value on interaction

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

@@ -1,11 +1,13 @@
 import { ButtonHTMLAttributes, FC } from 'react';
 import { TabModel } from '../../models/tab';
+import { TabView } from '../../types/tab';
 type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type' | 'role' | 'disabled'>;
 export interface DialTabProps extends NativeButtonProps {
     tab: TabModel;
     active: boolean;
     invalid?: boolean;
     horizontal?: boolean;
+    view?: TabView;
     onClick: (id: string) => void;
 }
 /**
@@ -26,6 +28,8 @@ export interface DialTabProps extends NativeButtonProps {
  * @param tab - The tab model containing its `id`, `name`, [`disabled`], [`invalid`], [`warning`].
  * @param active - Whether the tab is currently active.
  * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
+ * @param [view=TabView.Default] - Visual style of the tab. Uses the {@link TabView} enum.
+ *   `Inline` renders a compact pill with a leading check icon when active.
  * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.
  */
 export declare const DialTab: FC<DialTabProps>;

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

@@ -1,17 +1,20 @@
 import { FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { ScreenResolution, TabOrientation } from '../../types/tab';
+import { ScreenResolution, TabOrientation, TabView } from '../../types/tab';
 export interface DialTabsProps {
     tabs: TabModel[];
     activeTab: string;
     onClick: (id: string) => void;
     orientation?: TabOrientation;
+    view?: TabView;
     className?: string;
     screenThreshold?: ScreenResolution;
     smallScreenContainerClassName?: string;
     smallScreenDropdownItemClassName?: string;
     desktopDropdownClassName?: string;
     desktopTabClassName?: string;
+    inlineContainerClassName?: string;
+    inlineTabClassName?: string;
 }
 /**
  * A responsive and overflow-aware tabs component that automatically adapts its layout
@@ -48,6 +51,9 @@ export interface DialTabsProps {
  * @param activeTab - The identifier of the currently active tab.
  * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
  * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tabs. Uses the {@link TabOrientation} enum.
+ * @param [view=TabView.Default] - Visual style of the tabs. Uses the {@link TabView} enum.
+ *   `Inline` renders a compact segmented control where the active tab is marked with a
+ *   leading check icon. The inline view is not responsive and ignores overflow/dropdown logic.
  * @param [screenThreshold=ScreenResolution.Tablet] - Defines the screen size threshold
  *   below which tabs collapse into a dropdown. Uses the {@link ScreenRelosution} enum.
  *   When set to `Tablet`, both mobile and tablet screens will trigger dropdown mode.

package/dist/src/index.d.ts

@@ -1,5 +1,20 @@
 export { DialCaptionText, DialErrorText, } from './components/CaptionText/CaptionText';
+export { DialAnalyticsCard } from './components/Analytics';
+export type { DialAnalyticsCardProps } from './components/Analytics';
+export { AnalyticsCardVariant } from './types/analytics';
+export { DialAnalyticsBar } from './components/Analytics';
+export type { DialAnalyticsBarProps } from './components/Analytics';
+export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './components/Analytics';
+export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from './models/analytics';
+export { DialAnalyticsErrorTag } from './components/Analytics';
+export type { DialAnalyticsErrorTagProps } from './components/Analytics';
+export { DialAnalyticsBarGroup } from './components/Analytics';
+export type { DialAnalyticsBarGroupProps } from './components/Analytics';
+export { DialAnalyticsHistogram } from './components/Analytics';
+export type { DialAnalyticsHistogramProps } from './components/Analytics';
 export { DialLabel } from './components/Label/Label';
+export { DialAccordion } from './components/Accordion/Accordion';
+export type { DialAccordionProps } from './components/Accordion/Accordion';
 export { DialIcon } from './components/Icon/Icon';
 export { DialNotification } from './components/Notification/Notification.tsx';
 export { DialLoader } from './components/Loader/Loader';
@@ -47,6 +62,8 @@ export type { DialFabButtonProps } from './components/FabButton/FabButton';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTooltip } from './components/Tooltip/Tooltip';
 export { DialSwitch } from './components/Switch/Switch';
+export { DialSegmentedControl } from './components/SegmentedControl/SegmentedControl';
+export type { DialSegmentedControlProps } from './components/SegmentedControl/SegmentedControl';
 export { DialPopup } from './components/Popup/Popup';
 export { DialConfirmationPopup } from './components/ConfirmationPopup/ConfirmationPopup';
 export { DialRadioGroupPopupField } from './components/RadioGroupPopupField/RadioGroupPopupField';
@@ -72,6 +89,7 @@ export { DialFileManager } from './components/FileManager/FileManager';
 export type { FileManagerGridRow } from './components/FileManager/FileManagerContext';
 export type { GridOptions, ToolbarOptions, BulkActionsToolbarOptions, } from './components/FileManager/FileManager';
 export { DialDestinationFolderPopup } from './components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup';
+export { DialFoldersTree } from './components/FileManager/components/FoldersTree/FoldersTree.tsx';
 export { NotificationVariant } from './types/notification.ts';
 export { ButtonVariant, ButtonAppearance } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
@@ -79,7 +97,7 @@ export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
 export { ElementSize } from './types/size';
-export { TabOrientation } from './types/tab';
+export { TabOrientation, TabView } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
@@ -96,6 +114,7 @@ export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
 export type { SelectOption } from './models/select';
+export type { SegmentedControlOption } from './models/segmented-control';
 export type { TabModel } from './models/tab';
 export type { DropdownItem } from './models/dropdown';
 export type { DialModifiedEntity } from './models/base-entity';