@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.7

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

@@ -117,4 +117,4 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [selectionMode] - Could be GridSelectionMode.MULTIPLE or GridSelectionMode.SINGLE to enable selection column
  * @param [allowDisabledContextMenu] - Enables context menu actions even if row itself is disabled for selection
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, }: DialGridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/JsonEditor/lazy.d.ts

@@ -11,4 +11,4 @@
  * Vite/Rolldown versions - see `openspec/changes/isolate-heavy-feature-modules`
  * Section 9's `diagnosis-baseline.txt` for the measured reproduction).
  */
-export declare const LazyDialJsonEditor: () => Promise<typeof import("./JsonEditor")>;
+export declare const LazyDialJsonEditor: () => Promise<typeof import('./JsonEditor')>;

package/dist/src/components/MarkdownEditor/lazy.d.ts

@@ -4,4 +4,4 @@
  * re-export this same binding instead of each declaring their own copy -
  * see `src/components/JsonEditor/lazy.ts`'s comment for why.
  */
-export declare const LazyDialMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyDialMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

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

@@ -1,5 +1,6 @@
 import { FC, SyntheticEvent } from 'react';
 import { AvatarShape } from '../../../types/avatar';
+import { AvatarColorClasses } from '../../../utils/avatar';
 /** Props for `Avatar`. */
 export interface AvatarProps {
     /** Display name the initials and the colour are derived from. */
@@ -14,6 +15,8 @@ export interface AvatarProps {
     size?: number;
     /** Outline of the avatar. */
     shape?: AvatarShape;
+    /** Explicit colour pair overriding the deterministic pick from `name`. */
+    color?: AvatarColorClasses;
     /** Additional CSS classes for the avatar. */
     className?: string;
     /** Type-scale class for the initials. When set, it replaces the font size derived from `size`. */
@@ -28,9 +31,11 @@ export interface AvatarProps {
  * Design system 2.0
  *
  * The same name always gets the same colour, drawn from the theme's visual
- * tokens, so a list of avatars stays stable between renders and sessions. An
- * image that is missing or fails to load falls back to the initials; a new
- * `src` tries the image again.
+ * tokens, so a list of avatars stays stable between renders and sessions; pass
+ * `color` to pin one entry of `AVATAR_PALETTE` instead, so every avatar of a
+ * kind shares one colour regardless of name or locale. An image that is
+ * missing or fails to load falls back to the initials; a new `src` tries the
+ * image again.
  *
  * An avatar with an `alt` is a `role="img"` named by it, whether it shows the
  * image or the initials. Without one it is decorative and hidden from
@@ -48,6 +53,7 @@ export interface AvatarProps {
  * @param [alt=''] - Accessible name; empty makes the avatar decorative
  * @param [size=32] - Width and height in px
  * @param [shape=AvatarShape.Circle] - Outline of the avatar
+ * @param [color] - Explicit colour pair overriding the deterministic pick from `name`
  * @param [className] - Additional CSS classes for the avatar
  * @param [textClassName] - Type-scale class for the initials, replacing the size-derived font size
  * @param [onImageError] - Called when the image fails to load

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

@@ -29,7 +29,7 @@ export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
  */
 export declare const segmentWidthClassName: Record<'first' | 'middle' | 'last', string>;
 /** The box that draws a segment, around its icon and its label. */
-export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors";
+export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors";
 /**
  * A segment the user can follow. Secondary until hovered, then accent — the
  * same pairing the kit's other inline links use.
@@ -49,7 +49,7 @@ export declare const separatorClassName = "inline-flex flex-none items-center le
  * glyph to the 24×24 of WCAG 2.5.8; the enhanced 44×44 target would overhang
  * the segments on either side of it (see the README exception table).
  */
-export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
 /**
  * Smallest trail the collapse can produce: the root, the ellipsis and the
  * current page. Below that there is nothing left to hide behind the ellipsis.

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

@@ -1 +1 @@
-export declare const getButtonChevron: (isOpen: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const getButtonChevron: (isOpen: boolean) => import('react/jsx-runtime').JSX.Element;

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

@@ -1,17 +1,17 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
 export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
 export declare const calendarPopoverClassName = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
-export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
+export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";
 export declare const calendarDayOutsideClassName = "text-control-disable-primary";
 export declare const calendarFieldIconClassName = "text-secondary";
-export declare const calendarIcon: import("react/jsx-runtime").JSX.Element;
+export declare const calendarIcon: import('react/jsx-runtime').JSX.Element;
 export declare const calendarNavIcons: {
-    prev: import("react/jsx-runtime").JSX.Element;
-    next: import("react/jsx-runtime").JSX.Element;
+    prev: import('react/jsx-runtime').JSX.Element;
+    next: import('react/jsx-runtime').JSX.Element;
 };

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

@@ -12,4 +12,4 @@ export declare const dropdownItemListClassName: string;
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
-export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const submenuCaretIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -66,4 +66,4 @@ export interface FilterChipsProps<T extends string = string> {
  * @param [aria-label] - Names the row as a whole
  * @param [aria-labelledby] - Names the row from an existing element, e.g. a visible heading
  */
-export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -132,4 +132,4 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
  * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
  */
-export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionCell.d.ts

@@ -18,4 +18,4 @@ export interface SelectionCellProps<T> {
  * `rowSelected` event, so a selection made anywhere — another cell, the header,
  * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
  */
-export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionHeader.d.ts

@@ -11,4 +11,4 @@ export interface SelectionHeaderProps<T> extends IHeaderParams<T> {
  * rows put it in the `mixed` state, and disabled rows are excluded from the
  * count so a grid whose selectable rows are all selected still reads as full.
  */
-export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -11,7 +11,7 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
  * The panel sits one step of the overlay ladder (`z-interactive-tooltip`, see
- * `zIndex` in `tailwind.config.js`) above the surface it is anchored to — a
+ * `--z-index-*` in `src/styles/theme.scss`) above the surface it is anchored to — a
  * dropdown or select overlay, both `z-floating` — since it can be opened from
  * a row inside one of them.
  *

package/dist/src/components/New/MarkdownEditor/lazy.d.ts

@@ -4,4 +4,4 @@
  * re-export this same binding instead of each declaring their own copy -
  * see `src/components/JsonEditor/lazy.ts`'s comment for why.
  */
-export declare const LazyMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

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

@@ -2,4 +2,4 @@
  * Marks the chosen row in a `MenuItemMark.Check` list. Decorative: the row's
  * `aria-checked`/`aria-selected` already carries the state.
  */
-export declare const menuItemCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const menuItemCheckIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -51,4 +51,4 @@ export interface SegmentedControlProps<T extends string> {
  * @param [segmentClassName] - Additional classes for every segment
  * @param [aria-label] - Names the group as a whole
  */
-export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -27,7 +27,7 @@ export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */
-export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSubMenuCaretIcon: import('react/jsx-runtime').JSX.Element;
 /** Classes for the chevron rendered as the field's trailing icon. */
 export declare const selectFieldIconClassName = "text-secondary transition-transform";
 /**
@@ -35,6 +35,6 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
  * short enough to scan at a glance does not need to be filtered.
  */
 export declare const selectSearchThreshold = 8;
-export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSearchIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectCloseIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectEmptyStateIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -19,8 +19,8 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
- * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `--z-index-*` in
+ * `src/styles/theme.scss`) — above popups (`z-popup`), dropdowns and the calendar
  * (`z-floating`) and interactive tooltips — since they can be triggered by a
  * control inside any of them.
  *

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

@@ -37,4 +37,4 @@ export interface DialSegmentedControlProps<T extends string> {
  * @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;
+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/Select/constants.d.ts

@@ -1,9 +1,9 @@
 export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
 export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden";
 export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary";
 export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
-export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectChevronIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/index.d.ts

@@ -249,8 +249,9 @@ export type { BadgeProps } from './components/New/Badge/Badge';
 export { BadgeColor, BadgeVariant } from './types/badge';
 export { Avatar } from './components/New/Avatar/Avatar';
 export type { AvatarProps } from './components/New/Avatar/Avatar';
-export { AvatarShape } from './types/avatar';
-export { extractInitials } from './utils/avatar';
+export { AvatarColor, AvatarShape } from './types/avatar';
+export { AVATAR_PALETTE, extractInitials } from './utils/avatar';
+export type { AvatarColorClasses } from './utils/avatar';
 export { EntityIdentity } from './components/New/EntityIdentity/EntityIdentity';
 export type { EntityIdentityProps, EntityIdentityItem, EntityIdentityLabels, } from './components/New/EntityIdentity/EntityIdentity';
 export { EntityType } from './types/entity-type';

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

@@ -16,7 +16,7 @@
 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 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/types/avatar.d.ts

@@ -5,3 +5,12 @@ export declare enum AvatarShape {
     /** A rounded square — the avatar of an application, model or other entity. */
     Square = "square"
 }
+export declare enum AvatarColor {
+    Green1 = "green-1",
+    Violet2 = "violet-2",
+    Brown = "brown",
+    Red = "red",
+    Green2 = "green-2",
+    Blue = "blue",
+    Violet1 = "violet-1"
+}

package/dist/src/utils/avatar.d.ts

@@ -1,3 +1,4 @@
+import { AvatarColor } from '../types/avatar';
 /** A background and text colour pair for an initials avatar, as Tailwind classes. */
 export interface AvatarColorClasses {
     /** Background class, bound to a `--bg-visual-*` token. */
@@ -5,7 +6,7 @@ export interface AvatarColorClasses {
     /** Text class, bound to the matching `--text-visual-*` token. */
     foreground: string;
 }
-export declare const AVATAR_PALETTE: readonly AvatarColorClasses[];
+export declare const AVATAR_PALETTE: Record<AvatarColor, AvatarColorClasses>;
 /** Returns the palette entry for a name; the same name always gets the same colours. */
 export declare const pickAvatarColor: (name: string) => AvatarColorClasses;
 /** Returns 1–2 uppercase initials derived from a display name, or `'?'` when it has no letters. */

package/dist/src/utils/sub-menu-floating.d.ts

@@ -64,5 +64,5 @@ interface SubMenuPanelProps {
  * Shared floating panel wrapper (FloatingPortal → FloatingFocusManager → container div).
  * Used by DropdownSubMenuItem and SelectSubMenuItem.
  */
-export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import('react/jsx-runtime').JSX.Element;
 export {};

package/dist/types/avatar.js

@@ -1,4 +1,5 @@
-var e = /* @__PURE__ */ ((r) => (r.Circle = "circle", r.Square = "square", r))(e || {});
+var n = /* @__PURE__ */ ((e) => (e.Circle = "circle", e.Square = "square", e))(n || {}), i = /* @__PURE__ */ ((e) => (e.Green1 = "green-1", e.Violet2 = "violet-2", e.Brown = "brown", e.Red = "red", e.Green2 = "green-2", e.Blue = "blue", e.Violet1 = "violet-1", e))(i || {});
 export {
-  e as AvatarShape
+  i as AvatarColor,
+  n as AvatarShape
 };