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

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

@@ -0,0 +1,47 @@
+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;
+}
+/**
+ * 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.
+ */
+export declare const DialAnalyticsHistogram: FC<DialAnalyticsHistogramProps>;

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

@@ -0,0 +1,37 @@
+import { AnalyticsBarColorStop } from '../../../models/analytics';
+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 } 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 min-w-0 shrink 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;
@@ -201,6 +202,7 @@ export interface DialFileManagerProps {
     autoSelectUploadedItems?: boolean;
     maxNewFolderDepth?: number;
     onNewFolderDepthExceeded?: () => void;
+    initialUploadFilesOpen?: boolean;
 }
 /**
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
@@ -285,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/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",
@@ -94,6 +95,11 @@ 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;
     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/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 } 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';

package/dist/src/models/analytics.d.ts

@@ -0,0 +1,8 @@
+export interface AnalyticsBarColorStop {
+    /** Lower bound of the band (exclusive), as a ratio of value to maxValue (0–1). */
+    from: number;
+    /** Upper bound of the band (inclusive), as a ratio of value to maxValue (0–1). */
+    to: number;
+    /** CSS color applied to the fill when the ratio falls within this band. */
+    color: string;
+}

package/dist/src/models/segmented-control.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}

package/dist/src/models/select.d.ts

@@ -2,6 +2,12 @@ import { ReactNode } from 'react';
 export interface SelectOption {
     value: string;
     label: string;
+    /**
+     * Custom node rendered in place of `label` in the option list, trigger and
+     * submenu. `label` is still used for filtering/search matching and as the
+     * accessible name, so keep it as a plain-text representation of `labelNode`.
+     */
+    labelNode?: ReactNode;
     description?: string;
     disabled?: boolean;
     icon?: ReactNode;

package/dist/src/types/analytics.d.ts

@@ -0,0 +1,4 @@
+export declare enum AnalyticsCardVariant {
+    Default = "default",
+    Compact = "compact"
+}

package/dist/src/types/tab.d.ts

@@ -2,6 +2,10 @@ export declare enum TabOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+export declare enum TabView {
+    Default = "default",
+    Inline = "inline"
+}
 export declare enum ScreenResolution {
     Mobile = "mobile",
     Tablet = "tablet"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.12.0-dev.3",
+  "version": "0.12.0-dev.30",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -71,7 +71,8 @@
     "lodash": "4.18.1",
     "dompurify": "3.4.10",
     "shell-quote": "1.8.4",
-    "esbuild": "0.28.1"
+    "esbuild": "0.28.1",
+    "undici": "^6.27.0"
   },
   "dependencies": {
     "ag-grid-community": "^35.2.1",

package/dist/JsonEditor-BS0ggIlL.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-5EdIfkh9.cjs"),o=require("./editor-Ba3vCFHk.cjs"),u=require("@monaco-editor/react"),c={[o.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[o.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},g=({value:t,onChange:n,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=c})=>{function a(r){r?.editor?.defineTheme(e,d[e]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}return l.jsxRuntimeExports.jsx(u.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:t,onChange:n,theme:e,onValidate:i,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...s??{}}})};exports.DialJsonEditor=g;

package/dist/MarkdownEditor-BSlmBmbj.js

@@ -1,36 +0,0 @@
-import { j as o, m as l } from "./index-Cq70XHZ5.js";
-import c from "@uiw/react-md-editor";
-import { E as x } from "./editor-Cu1dRT39.js";
-const E = ({
-  value: e,
-  onChange: s,
-  height: r = 300,
-  preview: a = "edit",
-  theme: i = x.dark,
-  className: d,
-  placeholder: t
-}) => {
-  const m = t !== void 0 && !e;
-  return /* @__PURE__ */ o.jsxs(
-    "div",
-    {
-      "data-color-mode": i,
-      className: l("relative", d),
-      children: [
-        /* @__PURE__ */ o.jsx(
-          c,
-          {
-            value: e,
-            onChange: (n) => s?.(n || ""),
-            height: r,
-            preview: a
-          }
-        ),
-        m && /* @__PURE__ */ o.jsx("div", { className: "pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40", children: t })
-      ]
-    }
-  );
-};
-export {
-  E as DialMarkdownEditor
-};

package/dist/MarkdownEditor-D7SqU1MB.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-5EdIfkh9.cjs"),c=require("@uiw/react-md-editor"),x=require("./editor-Ba3vCFHk.cjs"),m=({value:t,onChange:r,height:s=300,preview:i="edit",theme:n=x.EditorThemes.dark,className:d,placeholder:o})=>{const a=o!==void 0&&!t;return e.jsxRuntimeExports.jsxs("div",{"data-color-mode":n,className:e.mergeClasses("relative",d),children:[e.jsxRuntimeExports.jsx(c,{value:t,onChange:l=>r?.(l||""),height:s,preview:i}),a&&e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:o})]})};exports.DialMarkdownEditor=m;

package/dist/editor-Ba3vCFHk.cjs

@@ -1 +0,0 @@
-"use strict";var t=(r=>(r.dark="dark",r.light="light",r))(t||{});exports.EditorThemes=t;

package/dist/editor-Cu1dRT39.js

@@ -1,4 +0,0 @@
-var a = /* @__PURE__ */ ((r) => (r.dark = "dark", r.light = "light", r))(a || {});
-export {
-  a as E
-};