@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.7

package/dist/components/Skeleton/Skeleton.js

@@ -1,14 +1,15 @@
-import { jsx as t, Fragment as $, jsxs as k } from "react/jsx-runtime";
+import { jsx as t, Fragment as L, jsxs as k } from "react/jsx-runtime";
 import "react";
 import { mergeClasses as n } from "../../utils/merge-classes.js";
-import { SkeletonVariant as i, SkeletonAvatarShape as N } from "../../types/skeleton.js";
-import { getAvatarSize as F } from "./utils.js";
-const G = ({
-  active: j = !0,
+import { SkeletonVariant as i, SkeletonAvatarShape as S } from "../../types/skeleton.js";
+import { getAvatarSize as P } from "./utils.js";
+import { DIAL_KIT_CLASS as R } from "../../constants/public-class-names.js";
+const B = ({
+  active: A = !0,
   paragraph: u = !0,
   avatar: m = !1,
   showTitle: p = !0,
-  loading: S = !0,
+  loading: N = !0,
   children: g,
   variant: o = i.Default,
   width: l,
@@ -16,13 +17,13 @@ const G = ({
   overlay: s,
   color: e,
   className: h,
-  ...b
+  ...C
 }) => {
-  if (!S && g)
-    return /* @__PURE__ */ t($, { children: g });
+  if (!N && g)
+    return /* @__PURE__ */ t(L, { children: g });
   const d = n(
     "bg-layer-raised",
-    j && "animate-pulse",
+    A && "animate-pulse",
     h
   );
   if (o !== i.Default) {
@@ -33,21 +34,26 @@ const G = ({
       o === i.Text && "rounded",
       !!s && "relative"
     ), r = {};
-    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...b, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
+    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...C, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
   }
-  const A = !!m, w = !!p, z = !!u, x = typeof m == "object" ? m : {}, W = typeof p == "object" ? p : {}, C = typeof u == "object" ? u : {}, y = F(x.size), D = x.shape ?? N.Circle, P = W.width ?? "38%", v = C.rows ?? 3, f = C.width, R = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
+  const j = !!m, w = !!p, z = !!u, b = typeof m == "object" ? m : {}, D = typeof p == "object" ? p : {}, x = typeof u == "object" ? u : {}, y = P(b.size), W = b.shape ?? S.Circle, _ = D.width ?? "38%", v = x.rows ?? 3, f = x.width, I = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
   return /* @__PURE__ */ k(
     "div",
     {
-      ...b,
-      className: n("flex gap-4", !!s && "relative", h),
+      ...C,
+      className: n(
+        R.skeleton,
+        "flex gap-4",
+        !!s && "relative",
+        h
+      ),
       children: [
-        A && /* @__PURE__ */ t(
+        j && /* @__PURE__ */ t(
           "div",
           {
             className: n(
               d,
-              D === N.Circle ? "rounded-full" : "rounded",
+              W === S.Circle ? "rounded-full" : "rounded",
               "flex-shrink-0"
             ),
             style: {
@@ -63,7 +69,7 @@ const G = ({
             {
               className: n(d, "h-4 rounded"),
               style: {
-                width: P,
+                width: _,
                 ...e && { backgroundColor: e }
               }
             }
@@ -73,7 +79,7 @@ const G = ({
             {
               className: n(d, "h-4 rounded"),
               style: {
-                width: R(r),
+                width: I(r),
                 ...e && { backgroundColor: e }
               }
             },
@@ -86,5 +92,5 @@ const G = ({
   );
 };
 export {
-  G as Skeleton
+  B as Skeleton
 };

package/dist/components/Spinner/Spinner.js

@@ -1,6 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { mergeClasses as a } from "../../utils/merge-classes.js";
-const o = ({
+import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as o } from "../../constants/public-class-names.js";
+const d = ({
   size: e = 40,
   className: s,
   fullWidth: t = !1,
@@ -9,7 +10,8 @@ const o = ({
   "div",
   {
     role: "status",
-    className: a(
+    className: n(
+      o.spinner,
       "flex items-center justify-center",
       { "size-full": t },
       s
@@ -26,5 +28,5 @@ const o = ({
   }
 );
 export {
-  o as Spinner
+  d as Spinner
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.6",
-  "generatedAt": "2026-09-17T21:39:44.989Z",
+  "version": "0.15.0-dev.7",
+  "generatedAt": "2026-09-18T08:37:26.796Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -10761,6 +10761,11 @@
       "name": "NOT_ALLOWED_SPACES_REGEXP",
       "sourceFile": "constants/validation.ts",
       "signature": "NOT_ALLOWED_SPACES_REGEXP = new RegExp(NOT_ALLOWED_SPACES)"
+    },
+    {
+      "name": "DIAL_KIT_CLASS",
+      "sourceFile": "constants/public-class-names.ts",
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /** The `role=\"tablist\"` root of `Tabs`. */\n  tabs: 'dial-kit-tabs',\n  /**\n   * One tab inside `Tabs`. The selected tab's underline keeps its own\n   * `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }

package/dist/constants/public-class-names.js

@@ -0,0 +1,152 @@
+const i = {
+  /* ── Feedback and status ───────────────────────────────────────────────── */
+  /** The `role="status"` root of a `Spinner`. */
+  spinner: "dial-kit-spinner",
+  /**
+   * The outermost element of a `ProgressBar`: the box wrapping its label,
+   * track and readout — or the track itself, which is the root when the bar
+   * has neither.
+   */
+  progressBar: "dial-kit-progress-bar",
+  /** The root of a `Skeleton`, wrapping its avatar and text rows. */
+  skeleton: "dial-kit-skeleton",
+  /**
+   * The `Notification` surface. Present on every wrapper too — the toast and
+   * section-message variants of error, info, success, warning, loading and
+   * general all render this component.
+   */
+  notification: "dial-kit-notification",
+  /** The empty-state root of `NoDataContent`. */
+  noDataContent: "dial-kit-no-data-content",
+  /* ── Text ──────────────────────────────────────────────────────────────── */
+  /** The text element of a `Highlight`, which renders the matched query. */
+  highlight: "dial-kit-highlight",
+  /** The caption line under a field, rendered by `CaptionText`. */
+  captionText: "dial-kit-caption-text",
+  /**
+   * A caption in its error variant — what `ErrorText` renders. Additive to
+   * `captionText`, since one component draws both.
+   */
+  errorText: "dial-kit-error-text",
+  /** The `Label` root, which wraps the `label` element and its info button. */
+  label: "dial-kit-label",
+  /* ── Containers ────────────────────────────────────────────────────────── */
+  /** The `article` element of a `CardShell`. */
+  cardShell: "dial-kit-card-shell",
+  /** The `aside` element of a `CollapsibleSidebar`. */
+  collapsibleSidebar: "dial-kit-collapsible-sidebar",
+  /** The content box inside a `ResizableContainer`'s resize frame. */
+  resizableContainer: "dial-kit-resizable-container",
+  /**
+   * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
+   * `overlayClassName`.
+   */
+  popup: "dial-kit-popup",
+  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
+  confirmationPopup: "dial-kit-confirmation-popup",
+  /** The root of an `Accordion`. */
+  accordion: "dial-kit-accordion",
+  /** The breadcrumb root of a `FolderPath`. */
+  folderPath: "dial-kit-folder-path",
+  /* ── Menus and overlays ────────────────────────────────────────────────── */
+  /**
+   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through
+   * `listClassName`.
+   */
+  dropdown: "dial-kit-dropdown",
+  /**
+   * The `role="none"` item list inside a dropdown overlay — the box that holds
+   * the rows and owns their vertical padding. Present in both generations, and
+   * on a submenu's own list. It is *not* the floating panel.
+   */
+  dropdownList: "dial-kit-dropdown-list",
+  /**
+   * One row of a floating overlay: a dropdown item, a `Select` option, a
+   * submenu trigger, or a submenu child. It sits on the element that draws the
+   * row box — so on the wrapper, not the inner button, for a row that has a
+   * `rightControl` beside it.
+   */
+  menuItem: "dial-kit-menuitem",
+  /**
+   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like
+   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the
+   * state.
+   */
+  menuItemCheck: "dial-kit-menuitem-check",
+  /** The primary icon of a `DialDropdownIcon` trigger. */
+  dropdownIcon: "dial-kit-dropdown-icon",
+  /**
+   * The caret badge of a `DialDropdownIcon` trigger — the round plate the
+   * chevron sits on. Absent when `showCaret` is `false`.
+   */
+  dropdownIconCaret: "dial-kit-dropdown-icon-caret",
+  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */
+  tooltip: "dial-kit-tooltip",
+  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */
+  interactiveTooltip: "dial-kit-interactive-tooltip",
+  /** The text element of an `EllipsisTooltip`, which is also its trigger. */
+  ellipsisTooltip: "dial-kit-ellipsis-tooltip",
+  /* ── Fields ────────────────────────────────────────────────────────────── */
+  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */
+  search: "dial-kit-search",
+  /** The `PasswordInput` field, additive to `dial-kit-input`. */
+  passwordInput: "dial-kit-password-input",
+  /** The `NumberInput` field, additive to `dial-kit-input`. */
+  numberInput: "dial-kit-number-input",
+  /** The `TagInput` field, additive to `dial-kit-input`. */
+  tagInput: "dial-kit-tag-input",
+  /** The root of a `Select`, wrapping its label, field and caption. */
+  select: "dial-kit-select",
+  /** The trigger button of an `InlineSelect`. */
+  inlineSelect: "dial-kit-inline-select",
+  /** The root of a `Calendar`, wrapping its label and date field. */
+  calendar: "dial-kit-calendar",
+  /** The drop area of a `FileDropzone`. */
+  fileDropzone: "dial-kit-file-dropzone",
+  /* ── Controls ──────────────────────────────────────────────────────────── */
+  /** The row of a `Switch`: the control and its label. */
+  switch: "dial-kit-switch",
+  /** The row of a `Checkbox`: the box and its label. */
+  checkbox: "dial-kit-checkbox",
+  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */
+  checkboxBox: "dial-kit-checkbox-box",
+  /** The row of a `Radio`: the circle and its label. */
+  radio: "dial-kit-radio",
+  /** The root of a `RadioGroup`, wrapping its label and its radios. */
+  radioGroup: "dial-kit-radio-group",
+  /**
+   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed
+   * field that opens the group.
+   */
+  radioGroupPopupField: "dial-kit-radio-group-popup-field",
+  /** The `role="radiogroup"` track of a `SegmentedControl`. */
+  segmentedControl: "dial-kit-segmented-control",
+  /** One segment of a `SegmentedControl`. */
+  segmentedControlItem: "dial-kit-segmented-control-item",
+  /** The `role="tablist"` root of `Tabs`. */
+  tabs: "dial-kit-tabs",
+  /**
+   * One tab inside `Tabs`. The selected tab's underline keeps its own
+   * `dial-kit-tab-selected-underline`.
+   */
+  tab: "dial-kit-tab",
+  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */
+  tag: "dial-kit-tag",
+  /**
+   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it
+   * already carries.
+   */
+  toggleIconButton: "dial-kit-toggle-icon-button",
+  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */
+  closeButton: "dial-kit-close-button",
+  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */
+  infoButton: "dial-kit-info-button",
+  /**
+   * The wrapper of a `ButtonDropdown` — its trigger carries
+   * `dial-kit-base-button`.
+   */
+  buttonDropdown: "dial-kit-button-dropdown"
+};
+export {
+  i as DIAL_KIT_CLASS
+};