@epam/ai-dial-ui-kit 0.14.0-dev.4 → 0.14.0-dev.41

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

@@ -0,0 +1,70 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'size'>;
+export interface SliderProps extends NativeInputProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    labelProps?: LabelProps;
+    /** 2-element or 3-element label tuple rendered below the track */
+    labels?: [string, string] | [string, string, string];
+    /** Custom formatter for the displayed value; defaults to fixed-decimal based on step */
+    formatValue?: (value: number) => string;
+    /** Renders the current value at the end of the label row */
+    showValue?: boolean;
+    caption?: string;
+    error?: string;
+    onChange?: (value: number) => void;
+    containerClassName?: string;
+    /** Additional classes for the unfilled track */
+    trackClassName?: string;
+    /** Additional classes for the filled portion of the track */
+    fillClassName?: string;
+}
+/**
+ * A range slider from the 2.0 design system.
+ * aliases: RangeInput|TemperatureSlider|RangeSlider
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   id="temperature"
+ *   labelProps={{ label: 'Temperature' }}
+ *   value={temperature}
+ *   labels={['Precise', 'Neutral', 'Creative']}
+ *   onChange={setTemperature}
+ * />
+ * ```
+ *
+ * Built on a native `<input type="range">`, so the browser owns the drag, the
+ * arrow / Home / End steps, touch and the writing direction. Only the thumb is
+ * restyled; the track and its fill are separate elements so the fill can be
+ * driven from `value`. Thumb states live in `slider.scss`, because a
+ * pseudo-element cannot be reached by a utility class.
+ *
+ * The interactive row is 24px tall and spans the full width, so the pointer
+ * target meets WCAG 2.5.8 (Minimum) but not the 44px of 2.5.5 (Enhanced) — see
+ * the exception table in the README.
+ *
+ * @param value - Current slider value
+ * @param [min=0] - Minimum value
+ * @param [max=1] - Maximum value
+ * @param [step=0.1] - Step increment
+ * @param [disabled=false] - Whether the slider is disabled
+ * @param [labelProps] - Props of the {@link Label} rendered above the track
+ * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
+ * @param [formatValue] - Custom formatter for the displayed value; also becomes the announced `aria-valuetext`
+ * @param [showValue=false] - Renders the current value at the end of the label row
+ * @param [caption] - Helper text rendered below the track, and described by the slider
+ * @param [error] - Error message rendered below the track; replaces the caption
+ * @param [onChange] - Callback fired with the new value
+ * @param [containerClassName] - Additional classes for the outer container
+ * @param [trackClassName] - Additional classes for the unfilled track
+ * @param [fillClassName] - Additional classes for the filled portion of the track
+ * @param [className] - Additional classes for the underlying range input
+ */
+export declare const Slider: FC<SliderProps>;
+export {};

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

@@ -1,10 +1,10 @@
 import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { ElementSize } from '../../../types/size';
+import { TagAppearance } from '../../../types/tag';
 type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
 export interface TagProps extends NativeTagProps {
     label: string;
     icon?: ReactNode;
-    size?: ElementSize;
+    appearance?: TagAppearance;
     selected?: boolean;
     disabled?: boolean;
     closable?: boolean;
@@ -16,6 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
+ * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
+ * prop: a tag sizes itself, and a caller that needs a different height is
+ * usually reaching for a button.
+ *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
  *
@@ -24,18 +28,36 @@ export interface TagProps extends NativeTagProps {
  * the caller: a clickable tag that is also closable gives a screen reader two
  * actions with no way to tell which one it landed on.
  *
+ * No tag draws a rim; the two appearances are told apart by their fill.
+ * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
+ * at all until it is selected, one hover tint shared by both states, a semibold
+ * label once selected, and the state carried on `aria-pressed` rather than by
+ * the tint alone. Give it an `onClick` — a selectable tag that cannot be
+ * activated is a colour and nothing else.
+ *
+ * Selecting one therefore changes its width by the difference between the
+ * regular and semibold label. In a wrapping filter row that is what the design
+ * asks for; if a fixed width matters, give the chip one.
+ *
  * @example
  * ```tsx
  * <Tag label="TypeScript" />
  * <Tag label="TypeScript" closable onRemove={() => remove('TypeScript')} />
  * <Tag label="Drafts" selected onClick={() => toggle('Drafts')} />
+ * <Tag
+ *   label="Drafts"
+ *   appearance={TagAppearance.Selectable}
+ *   selected={isSelected}
+ *   onClick={() => toggle('Drafts')}
+ * />
  * ```
  *
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
- * @param [size=ElementSize.Standard] - Tag height: standard is 24px, small is 20px.
+ * @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
  * @param [selected=false] - Applies the accent-tinted selected styling.
- * @param [disabled=false] - Dims the tag and suppresses the remove control and click handling.
+ * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.
  * @param [removeLabel] - Accessible name of the remove button; defaults to `Remove <label>`.
  * @param [onRemove] - Called when the remove button is clicked. The click does not bubble to `onClick`.

package/dist/src/components/New/Tag/constants.d.ts

@@ -0,0 +1,23 @@
+import { TagAppearance } from '../../../types/tag';
+/**
+ * Geometry and layout shared by every tag. No transition: the design animates
+ * the hover and selected steps instantly (0ms), so the fill switches on the
+ * same frame as the pointer.
+ */
+export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
+/**
+ * Fill and text colour per appearance and selection. No tag draws a rim: the
+ * two appearances are told apart by their fill — `outlined` sits on the raised
+ * layer, `selectable` on nothing until it is selected, where it also steps its
+ * label up from secondary to primary.
+ */
+export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
+/** Cursor and focus ring of a tag that can be activated. */
+export declare const tagInteractiveClassName = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+/**
+ * Hover and active step of a clickable tag — one accent tint for every
+ * appearance and both selections, as the 2.0 overlay rows do. A selected tag
+ * must not read as hovered at rest, and the label is left alone, so an
+ * unselected one never darkens into looking selected.
+ */
+export declare const tagHoverClassName = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";

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

@@ -1,10 +1,16 @@
 import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
 import { LabelProps } from '../Label/Label';
+export declare enum TextareaResize {
+    None = "none",
+    Both = "both",
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
 export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, HTMLTextAreaElement> {
     labelProps?: LabelProps;
     invalid?: boolean;
     containerClassName?: string;
-    resize?: boolean;
+    resize?: boolean | TextareaResize;
     error?: string;
     caption?: string;
     onChange?: (value: string) => void;
@@ -32,7 +38,7 @@ export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttrib
  * @param [className=""] - Additional CSS classes to apply to the textarea element
  * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
- * @param [resize=false] - Whether the textarea has possibility to resize
+ * @param [resize=false] - Whether/how the textarea can be resized. Accepts a boolean (`true` = both directions, `false` = none) or a {@link TextareaResize} value for a single axis (`horizontal`/`vertical`)
  * @param [error] - Error message to display below the textarea (also adds error styling)
  * @param [caption] - Optional caption text to display below the textarea
  */

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

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from 'react';
+export interface ThemeScopeProps {
+    /**
+     * Class name that redefines the design tokens for this subtree — typically a
+     * host-owned rule setting `--bg-*` / `--text-*` / `--stroke-*` custom
+     * properties. Multiple space-separated classes are allowed.
+     */
+    className: string;
+    children: ReactNode;
+}
+/**
+ * Marks a subtree as living under a host-defined token scope, so overlays this
+ * subtree opens in a portal are painted with the same tokens.
+ * Design system 2.0
+ *
+ * Redefining design tokens on a panel root re-themes everything the panel
+ * renders — until a `Dropdown`, `Popup`, `Tooltip` or `Calendar` escapes into a
+ * `FloatingPortal` at the end of `<body>`, where the scope's custom properties
+ * no longer reach it. Wrapping the panel in a `ThemeScope` re-applies the same
+ * class to those portalled overlays, so an overlay opened from a dark panel
+ * stays dark while the rest of the app keeps its own palette.
+ *
+ * The wrapper itself is `display: contents`, so it generates no box and leaves
+ * the surrounding flex or grid layout untouched — custom properties inherit
+ * through it all the same. Scopes nest: an inner scope's overlays carry the
+ * outer classes first, matching the cascade they would see in place.
+ *
+ * @example
+ * ```tsx
+ * // .side-panel-theme redefines --bg-*, --text-* and --stroke-* tokens.
+ * <ThemeScope className="side-panel-theme">
+ *   <ConversationPanel {...props} />
+ * </ThemeScope>
+ * ```
+ *
+ * @param className - Class name redefining the design tokens for this subtree
+ * @param children - The subtree painted with those tokens
+ */
+export declare const ThemeScope: FC<ThemeScopeProps>;
+/**
+ * Class names of the enclosing `ThemeScope`s, outermost first, or `''` when the
+ * caller sits outside any scope. Components rendering into a `FloatingPortal`
+ * merge this onto their floating root so the tokens follow them out of the
+ * subtree.
+ */
+export declare const useThemeScope: () => string;

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

@@ -19,7 +19,7 @@ export interface TooltipProps extends TooltipContainerOptions {
  * Tooltip text does not reach assistive technology unless the trigger itself
  * carries it: pass `asChild` so the `aria-describedby` lands on the control
  * rather than on a wrapper `<span>`, and never let a tooltip be the only
- * accessible name of a control — it renders nothing on mobile screens.
+ * accessible name of a control — it renders nothing on a touch-only device.
  *
  * @example
  * ```tsx

package/dist/src/components/New/Tooltip/TooltipContent.d.ts

@@ -7,9 +7,10 @@ export interface TooltipContentProps extends HTMLProps<HTMLDivElement> {
  * Design system 2.0
  *
  * Rendered in a portal, above popups and dropdowns, with an arrow pointing back
- * at the trigger. Renders nothing on a mobile screen, where there is no hover
- * to reveal it — so a control must never depend on a tooltip alone to be
- * understood, or to have an accessible name.
+ * at the trigger. Renders nothing on a touch-only device, where no pointer can
+ * hover to reveal it — so a control must never depend on a tooltip alone to be
+ * understood, or to have an accessible name. A narrow viewport is not itself
+ * disqualifying: an embed a few hundred pixels wide still hovers on a desktop.
  *
  * @param children - The content to display inside the tooltip
  * @param [className] - Additional CSS classes applied to the tooltip bubble

package/dist/src/components/New/Tooltip/constants.d.ts

@@ -21,5 +21,19 @@ export declare const arrowClassName = "fill-control-inverted";
 /**
  * Tooltips sit above popups, dropdowns and the calendar (all `z-[53]`), since
  * they can be triggered by a control inside one of them.
+ *
+ * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
+ * that is around 60 characters a line, past which a line stops being
+ * comfortable to read. Longer text wraps instead of widening the bubble. The
+ * width stays a literal because Tailwind only sees static class strings.
+ *
+ * `shadow-xs` is the elevation the design gives a tooltip — the tightest step
+ * of the scale, which is what a bubble anchored to its trigger needs: enough to
+ * lift it off the surface underneath without reading as a floating panel, the
+ * way `shadow-md` marks a dropdown or a calendar. It matters most where the
+ * inverted surface is the lightest thing on screen, on a dark panel. The arrow
+ * takes no shadow of its own: both `xs` layers blur 4px or less, so there is
+ * nothing to see around a 7px triangle that the box's own shadow does not
+ * already carry.
  */
-export declare const tooltipClassName = "z-[55] max-w-[300px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted";
+export declare const tooltipClassName = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";

package/dist/src/components/New/constants/icon.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Icon stroke (1.5px) from the 2.0 stroke scale. Tabler renders every outline
+ * icon at `stroke={2}` unless told otherwise, so the token has to be passed
+ * explicitly — a 2.0 component that omits it draws a heavier icon than the
+ * design system asks for.
+ *
+ * It is a number rather than a Tailwind utility because an icon's weight is an
+ * SVG `stroke-width` attribute on the glyph, not a border on its box. The
+ * border half of the same scale stays on plain Tailwind widths — `border`,
+ * `border-2`, `border-4`, and `border-[0.5px]` for a table divider.
+ *
+ * Exported publicly so icons a consumer passes into a 2.0 component — a button
+ * icon, a menu item, a segmented-control segment — can match the ones the
+ * components draw themselves.
+ *
+ * Two deliberate departures inside the library: the empty-state illustrations
+ * (`NoDataContent`, the grid's no-rows overlay) use a much lighter stroke,
+ * since a 1.5px line reads as a drawing at 16px and as a fence at 100px; and
+ * the checkbox glyph uses a heavier one, because it is a control mark sized to
+ * a 14px box rather than an icon from the set.
+ */
+export declare const DIAL_KIT_ICON_STROKE = 1.5;

package/dist/src/components/New/constants/overlay.d.ts

@@ -17,8 +17,24 @@ export declare const overlaySubMenuClassName: string;
  * reached by keyboard, and the 1.0 versions suppressed the ring outright.
  */
 export declare const overlayItemClassName: string;
-/** Tint marking the row that is currently selected. */
-export declare const overlayItemSelectedClassName = "bg-control-accent-alpha-hover";
-export declare const overlayItemDisabledClassName = "text-secondary";
+/**
+ * Tint marking the row that is currently selected, at rest: the faint step of
+ * the accent-alpha ramp, so hovering a selected row still has somewhere to go.
+ */
+export declare const overlayItemSelectedClassName = "bg-control-accent-alpha";
+/**
+ * The row that is currently open in a navigation menu: the same faint tint as a
+ * selected row, with the label and its icon in the accent colour. Unlike
+ * {@link overlayItemSelectedClassName} it carries no separate mark — the colour
+ * *is* the mark, which is what the design's in-navigation state shows.
+ */
+export declare const overlayItemHighlightClassName: string;
+/**
+ * A row that cannot be chosen. `overlayItemClassName` tints every row on hover
+ * and a selected row carries a tint at rest, so both have to be turned off
+ * again here — `mergeClasses` is tailwind-merge, so these later declarations
+ * win as long as the disabled classes are merged after the selected ones.
+ */
+export declare const overlayItemDisabledClassName: string;
 /** Distance between the trigger and its panel, and between nested panels. */
 export declare const overlayGap = 4;

package/dist/src/components/Tooltip/TooltipContent.d.ts

@@ -6,6 +6,10 @@ export interface Props extends HTMLProps<HTMLDivElement> {
  * The content area of a tooltip that displays the tooltip information
  * Design system 1.0
  *
+ * Renders nothing on a touch-only device, where no pointer can hover to reveal
+ * it. A narrow viewport is not itself disqualifying: an embed a few hundred
+ * pixels wide still hovers on a desktop.
+ *
  * @param children - The content to display inside the tooltip
  * @param [style] - Additional inline styles for the tooltip content
  */

package/dist/src/hooks/use-has-hover.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A React hook that reports whether the device's primary pointer can hover.
+ *
+ * Tracks the `hover: none` media query rather than the viewport width, so a
+ * narrow embed on a desktop still counts as hover-capable, and re-evaluates
+ * when a hybrid device switches input — a tablet that gains a trackpad starts
+ * hovering without a reload.
+ *
+ * Defaults to `true` where the capability cannot be read (SSR, or a browser
+ * without `matchMedia`), so hover-only UI is never dropped on a guess.
+ *
+ * @returns {boolean} `true` when the pointer can hover, `false` on a touch-only device.
+ *
+ * @example
+ * const hasHover = useHasHover();
+ * if (!hasHover) {
+ *   return null; // Nothing would ever reveal a hover-only bubble here
+ * }
+ */
+export declare const useHasHover: () => boolean;

package/dist/src/index.d.ts

@@ -107,6 +107,7 @@ export { RadioGroupOrientation } from './types/radio-group';
 export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
+export { MenuItemMark } from './types/menu-item';
 export { ElementSize } from './types/size';
 export { ScreenResolution, TabOrientation, TabView } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
@@ -143,8 +144,8 @@ export { NOT_ALLOWED_SYMBOLS, NOT_ALLOWED_SPACES, NOT_ALLOWED_SYMBOLS_REGEXP, NO
 export { DialSchemaRenderer } from './components/SchemaRenderer/SchemaRenderer';
 export { SchemaRendererVariant, SchemaDisplayMode, SchemaOrientation, JsonSchemaType, } from './components/SchemaRenderer/types';
 export type { DialSchemaRendererProps, JsonSchema, JsonSchemaDef, ValidationError, } from './components/SchemaRenderer/types';
-export declare const LazyDialJsonEditor: () => Promise<typeof import("./components/JsonEditor/JsonEditor")>;
-export declare const LazyDialMarkdownEditor: () => Promise<typeof import("./components/MarkdownEditor/MarkdownEditor")>;
+export { LazyDialJsonEditor } from './components/JsonEditor/lazy';
+export { LazyDialMarkdownEditor } from './components/MarkdownEditor/lazy';
 export { NotificationVariant, NotificationType } from './types/notification.ts';
 export { Notification } from './components/New/Notification/Notification';
 export { Highlight } from './components/New/Highlight/Highlight';
@@ -167,7 +168,7 @@ export type { FabButtonProps } from './components/FabButton/FabButton';
 export { ButtonDropdown } from './components/New/ButtonDropdown/ButtonDropdown';
 export type { ButtonDropdownProps } from './components/New/ButtonDropdown/ButtonDropdown';
 export type { MarkdownEditorProps } from './components/New/MarkdownEditor/MarkdownEditor';
-export declare const LazyMarkdownEditor: () => Promise<typeof import("./components/New/MarkdownEditor/MarkdownEditor")>;
+export { LazyMarkdownEditor } from './components/New/MarkdownEditor/lazy';
 export { InlineSelect, InlineSelectTrigger, } from './components/New/InlineSelect/InlineSelect';
 export type { InlineSelectProps, InlineSelectTriggerProps, } from './components/New/InlineSelect/InlineSelect';
 export { Select } from './components/New/Select/Select';
@@ -178,7 +179,7 @@ export { InfoButton } from './components/New/InfoButton/InfoButton';
 export type { InfoButtonProps } from './components/New/InfoButton/InfoButton';
 export type { LabelProps } from './components/New/Label/Label';
 export { Label } from './components/New/Label/Label';
-export { Textarea } from './components/New/Textarea/Textarea';
+export { Textarea, TextareaResize } from './components/New/Textarea/Textarea';
 export { Input } from './components/New/Input/Input';
 export type { InputProps } from './components/New/Input/Input';
 export { PasswordInput } from './components/New/PasswordInput/PasswordInput';
@@ -193,6 +194,10 @@ export { ConfirmationPopup } from './components/New/ConfirmationPopup/Confirmati
 export type { ConfirmationPopupProps } from './components/New/ConfirmationPopup/ConfirmationPopup';
 export { Dropdown } from './components/New/Dropdown/Dropdown';
 export type { DropdownProps } from './components/New/Dropdown/Dropdown';
+export { ThemeScope, useThemeScope, } from './components/New/ThemeScope/ThemeScope';
+export type { ThemeScopeProps } from './components/New/ThemeScope/ThemeScope';
+export { MenuItem } from './components/New/MenuItem/MenuItem';
+export type { MenuItemProps } from './components/New/MenuItem/MenuItem';
 export type { TextareaProps } from './components/New/Textarea/Textarea';
 export type { CaptionTextProps } from './components/New/CaptionText/CaptionText';
 export { CaptionText, ErrorText, } from './components/New/CaptionText/CaptionText';
@@ -208,6 +213,8 @@ export { RadioGroupPopupField } from './components/New/RadioGroupPopupField/Radi
 export type { RadioGroupPopupFieldProps } from './components/New/RadioGroupPopupField/RadioGroupPopupField';
 export { Checkbox } from './components/New/Checkbox/Checkbox';
 export type { CheckboxProps } from './components/New/Checkbox/Checkbox';
+export { CheckboxBox } from './components/New/Checkbox/CheckboxBox';
+export type { CheckboxBoxProps } from './components/New/Checkbox/CheckboxBox';
 export { ToggleIconButton } from './components/New/ToggleIconButton/ToggleIconButton';
 export type { ToggleIconButtonProps } from './components/New/ToggleIconButton/ToggleIconButton';
 export { SegmentedControl } from './components/New/SegmentedControl/SegmentedControl';
@@ -218,11 +225,14 @@ export { FileDropzone } from './components/New/FileDropzone/FileDropzone';
 export type { FileDropzoneProps } from './components/New/FileDropzone/FileDropzone';
 export { Tag } from './components/New/Tag/Tag';
 export type { TagProps } from './components/New/Tag/Tag';
+export { TagAppearance } from './types/tag';
 export { TagInput } from './components/New/TagInput/TagInput';
 export type { TagInputProps } from './components/New/TagInput/TagInput';
 export { Search } from './components/New/Search/Search';
 export type { SearchProps } from './components/New/Search/Search';
 export { matchesAccept } from './utils/file-accept';
+export { Slider } from './components/New/Slider/Slider';
+export type { SliderProps } from './components/New/Slider/Slider';
 export { Tooltip } from './components/New/Tooltip/Tooltip';
 export type { TooltipProps } from './components/New/Tooltip/Tooltip';
 export { TooltipContainer } from './components/New/Tooltip/TooltipContainer';
@@ -231,5 +241,24 @@ export type { TooltipContentProps } from './components/New/Tooltip/TooltipConten
 export { TooltipTrigger } from './components/New/Tooltip/TooltipTrigger';
 export type { TooltipContainerOptions } from './components/New/Tooltip/TooltipContext';
 export { TooltipPlacement } from './types/tooltip.ts';
+export { InteractiveTooltip } from './components/New/InteractiveTooltip/InteractiveTooltip';
+export type { InteractiveTooltipProps } from './components/New/InteractiveTooltip/InteractiveTooltip';
 export { EllipsisTooltip } from './components/New/EllipsisTooltip/EllipsisTooltip';
 export type { EllipsisTooltipProps } from './components/New/EllipsisTooltip/EllipsisTooltip';
+export { CollapsibleSidebar } from './components/New/CollapsibleSidebar/CollapsibleSidebar';
+export type { CollapsibleSidebarProps } from './components/New/CollapsibleSidebar/CollapsibleSidebar';
+export { ResizableContainer } from './components/New/ResizableContainer/ResizableContainer';
+export type { ResizableContainerProps } from './components/New/ResizableContainer/ResizableContainer';
+export { ConditionalResizableContainer } from './components/New/ResizableContainer/ConditionalResizableContainer';
+export type { ConditionalResizableContainerProps } from './components/New/ResizableContainer/ConditionalResizableContainer';
+export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
+export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
+export { Grid, GRID_SELECTION_COLUMN_ID } from './components/New/Grid/Grid';
+export type { GridProps } from './components/New/Grid/Grid';
+export { DateCellRenderer } from './components/New/Grid/renderers/DateCellRenderer';
+export type { DateCellRendererProps, DateValue, } from './components/New/Grid/renderers/DateCellRenderer';
+export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_DATE_LOCALE, } from './components/New/Grid/renderers/constants';
+export { GRID_ALIGN_RIGHT_CLASS, GRID_ROOT_CLASS, GRID_THEME_PARAMS, ROW_HEIGHT as GRID_ROW_HEIGHT, } from './components/New/Grid/constants';
+export { DIAL_KIT_ICON_STROKE } from './components/New/constants/icon';
+export { convertToDate } from './utils/grid-date';
+export { baseColumnComparator, checkColDefsChanges, } from './utils/grid-comparators';

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

@@ -1,4 +1,5 @@
 import { DropdownItemType } from '../types/dropdown';
+import { MenuItemMark } from '../types/menu-item';
 import { ReactNode, MouseEvent } from 'react';
 export interface DropdownSubMenuHoverOptions {
     /** Delay (ms) before the submenu opens/closes on hover. Defaults to `{ open: 80, close: 80 }`. */
@@ -15,6 +16,31 @@ export interface DropdownItem {
     icon?: ReactNode;
     disabled?: boolean;
     danger?: boolean;
+    /**
+     * Renders the item as a multiselect row: a checkbox box before the label, the
+     * accent tint while checked, and a click that leaves the menu open. The row is
+     * a `menuitemcheckbox` whose state lives on `aria-checked`; the box itself is
+     * decorative. Keep `checked` in your own state and update it from the item's
+     * `onClick` (or the dropdown's `onItemClick`).
+     */
+    selectable?: boolean;
+    /**
+     * How this item is marked while `checked`, straight from the design's
+     * Menu-item states: a trailing check (`Check`, a single choice that closes
+     * the menu), a leading checkbox box (`Checkbox`, the multiselect row that
+     * keeps the menu open) or an accent tint (`Highlight`, the current item of
+     * a navigation menu). Defaults to `Checkbox` for a `selectable` item and to
+     * `None` otherwise.
+     */
+    mark?: MenuItemMark;
+    /** Whether a marked item is currently checked. */
+    checked?: boolean;
+    /**
+     * A control of its own at the row's trailing edge — a favourite toggle, a
+     * delete button. It is rendered beside the row rather than inside it, so it
+     * keeps its own click and stays out of the row's accessible name.
+     */
+    rightControl?: ReactNode;
     type?: DropdownItemType;
     className?: string;
     onClick?: (info: {

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

@@ -1,4 +1,21 @@
 import { ReactNode } from 'react';
+import { TooltipPlacement } from '../types/tooltip';
+/**
+ * Data for the interactive panel {@link Select} anchors to an option's row —
+ * unlike a plain tooltip, its content can hold controls of its own (a "View
+ * details" link, for example), which is why it takes a full node rather than
+ * a string.
+ */
+export interface SelectOptionInteractiveTooltip {
+    content: ReactNode;
+    /** @default TooltipPlacement.Right */
+    placement?: TooltipPlacement;
+    /**
+     * Additional CSS classes for the panel — e.g. a wider `max-w-*` for content
+     * that does not fit the default 320px.
+     */
+    contentClassName?: string;
+}
 export interface SelectOption {
     value: string;
     label: string;
@@ -11,5 +28,18 @@ export interface SelectOption {
     description?: string;
     disabled?: boolean;
     icon?: ReactNode;
+    /**
+     * A control of its own at the row's trailing edge — a favourite toggle, a
+     * delete button. It is rendered beside the row rather than inside it, so it
+     * keeps its own click and stays out of the row's accessible name.
+     */
+    rightControl?: ReactNode;
+    /**
+     * Anchors an {@link InteractiveTooltip} to this option's row, open on hover
+     * or focus. Use it for content too rich for `description` — an explanation
+     * with its own link or button, the way a skill picker explains what a
+     * skill does before it is chosen.
+     */
+    interactiveTooltip?: SelectOptionInteractiveTooltip;
     children?: SelectOption[];
 }

package/dist/src/subpaths/editors.d.ts

@@ -0,0 +1,22 @@
+/**
+ * `@epam/ai-dial-ui-kit/editors` - curated subpath for the JSON/Markdown
+ * editor lazy loaders.
+ *
+ * The three loaders below are re-exported from the same shared leaf modules
+ * `src/index.ts` re-exports (`components/JsonEditor/lazy`,
+ * `components/MarkdownEditor/lazy`, `components/New/MarkdownEditor/lazy`),
+ * so this entry and the root reference one emitted chunk per loader instead
+ * of each carrying its own duplicate copy of the loader's `import()` call -
+ * see `components/JsonEditor/lazy.ts`'s comment for the emitted-topology
+ * defect that duplication caused. `src/mcp/generate-manifest.ts` follows
+ * this re-export back to the leaf module to keep attaching lazy-loading
+ * metadata to `DialJsonEditor`/`DialMarkdownEditor`/`MarkdownEditor` (2.0)
+ * in the published MCP component manifest.
+ */
+export { LazyDialJsonEditor } from '../components/JsonEditor/lazy';
+export { LazyDialMarkdownEditor } from '../components/MarkdownEditor/lazy';
+export { LazyMarkdownEditor } from '../components/New/MarkdownEditor/lazy';
+export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import("../components/MarkdownEditor/MarkdownEditorContainer")>;
+export { EditorThemes } from '../types/editor';
+export type { MarkdownEditorProps } from '../components/New/MarkdownEditor/MarkdownEditor';
+export type { DialMarkdownEditorContainerProps } from '../components/MarkdownEditor/MarkdownEditorContainer';

package/dist/src/subpaths/file-manager.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `@epam/ai-dial-ui-kit/file-manager` - curated subpath for `DialFileManager`
+ * and its directly related types/hooks/constants.
+ *
+ * Re-exports the FileManager-related names from the root `src/index.ts`
+ * barrel. `DialFileManager` reaches the legacy `DialGrid`
+ * (src/components/FileManager/FileManager.tsx:46), so importing from this
+ * subpath pulls in ag-grid-community/ag-grid-react exactly as importing
+ * `DialFileManager` from the root does.
+ */
+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';
+export { useDialFileManagerTabs } from '../components/FileManager/hooks/use-file-manager-tabs';
+export { FileManagerProvider } from '../components/FileManager/FileManagerProvider';
+export { useFileManagerContext } from '../components/FileManager/hooks/use-file-manager-context';
+export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } from '../types/file-manager';
+export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, type DialFileManagerActionsRef, type DialFileAcceptType, } from '../models/file-manager';
+export { NAME_COLUMN, SIZE_COLUMN, UPDATED_AT_COLUMN, } from '../constants/file-grid-columns';

package/dist/src/subpaths/grid.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `@epam/ai-dial-ui-kit/grid` - curated subpath for both Grid generations.
+ *
+ * Re-exports the Grid-related names from the root `src/index.ts` barrel.
+ * This subpath is an ergonomic feature boundary, not a substitute for the
+ * root entry's own tree-shaking (which
+ * `preserveModules` already provides for a root `import { Button } from
+ * '@epam/ai-dial-ui-kit'`). Importing from here pulls in ag-grid-community /
+ * ag-grid-react, exactly as importing `Grid`/`DialGrid` from the root does.
+ */
+export { DialGrid } from '../components/Grid/Grid';
+export type { DialGridProps } from '../components/Grid/Grid';
+export { DialDateCellRenderer } from '../components/Grid/renderers/DateCellRenderer';
+export type { DateValue as DialGridDateValue, DialDateCellRendererProps, } from '../components/Grid/renderers/DateCellRenderer';
+export { DEFAULT_DATE_FORMAT_OPTIONS as DEFAULT_GRID_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_GRID_DATE_LOCALE, } from '../components/Grid/renderers/constants';
+export { convertToDate as convertGridDateToDate } from '../components/Grid/renderers/utils';
+export { Grid, GRID_SELECTION_COLUMN_ID } from '../components/New/Grid/Grid';
+export type { GridProps } from '../components/New/Grid/Grid';
+export { DateCellRenderer } from '../components/New/Grid/renderers/DateCellRenderer';
+export type { DateCellRendererProps, DateValue, } from '../components/New/Grid/renderers/DateCellRenderer';
+export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_DATE_LOCALE, } from '../components/New/Grid/renderers/constants';
+export { GRID_ALIGN_RIGHT_CLASS, GRID_ROOT_CLASS, GRID_THEME_PARAMS, ROW_HEIGHT as GRID_ROW_HEIGHT, } from '../components/New/Grid/constants';
+export { convertToDate } from '../utils/grid-date';
+export { baseColumnComparator, checkColDefsChanges, } from '../utils/grid-comparators';
+export { GridSelectionMode } from '../models/selection-mode';

package/dist/src/types/menu-item.d.ts

@@ -0,0 +1,21 @@
+/**
+ * How a chosen row inside an overlay (dropdown menu, select list) is marked.
+ *
+ * The design marks a chosen row differently depending on what the overlay is.
+ * A **menu** puts a check at the trailing edge, single- and multi-select alike,
+ * and gives the current item of a navigation menu an accent label. A **select
+ * list** tints the chosen row instead, with a checkbox in front of it when the
+ * list is a multiselect.
+ */
+export declare enum MenuItemMark {
+    /** Nothing marks the row — it is only ever unselected. */
+    None = "none",
+    /** A trailing check on the chosen row; the row keeps its plain background. */
+    Check = "check",
+    /** The chosen row is tinted, with no glyph — the select list's own mark. */
+    Tint = "tint",
+    /** A leading checkbox box, tinted while checked, for multiselect rows. */
+    Checkbox = "checkbox",
+    /** Accent label on a tinted row: the current item in a navigation menu. */
+    Highlight = "highlight"
+}