@epam/ai-dial-ui-kit 0.16.0-dev.20 → 0.16.0-dev.22

package/dist/components/New/Calendar/TimePickerPanel.js

@@ -0,0 +1,87 @@
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { useMemo as p, useRef as x, useEffect as h } from "react";
+import { mergeClasses as b } from "../../../utils/merge-classes.js";
+const g = Array.from({ length: 24 }, (n, r) => String(r).padStart(2, "0")), y = Array.from(
+  { length: 60 },
+  (n, r) => String(r).padStart(2, "0")
+), S = "flex w-full shrink-0 items-center justify-center rounded-lg px-3 py-2 dial-small-text text-primary hover:bg-control-accent-alpha-hover focus:outline-hidden focus-visible:outline focus-visible:outline-focus", v = "bg-control-accent text-control-permanent hover:bg-control-accent", u = ({
+  label: n,
+  options: r,
+  selected: l,
+  onSelect: s
+}) => {
+  const t = x(null);
+  h(() => {
+    const e = t.current, o = e?.querySelector('[aria-selected="true"]');
+    !e || !o || (e.scrollTop = o.offsetTop - e.clientHeight / 2 + o.offsetHeight / 2);
+  }, []);
+  const f = (e) => {
+    const o = Array.from(
+      e.currentTarget.querySelectorAll("button")
+    ), a = o.indexOf(document.activeElement), i = {
+      ArrowDown: o[a + 1],
+      ArrowUp: o[a - 1],
+      Home: o[0],
+      End: o[o.length - 1]
+    }[e.key];
+    i && (e.preventDefault(), i.focus());
+  }, m = l ?? r[0];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: t,
+      role: "listbox",
+      "aria-label": n,
+      tabIndex: -1,
+      className: "flex h-56 flex-1 flex-col gap-0.5 overflow-y-auto",
+      onKeyDown: f,
+      children: r.map((e) => /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": e === l,
+          tabIndex: e === m ? 0 : -1,
+          className: b(
+            S,
+            e === l && v
+          ),
+          onClick: () => s(e),
+          children: e
+        },
+        e
+      ))
+    }
+  );
+}, T = ({
+  value: n,
+  onSelect: r
+}) => {
+  const [l, s] = p(() => {
+    const t = /^(\d{2}):(\d{2})$/.exec(n);
+    return t ? [t[1], t[2]] : [void 0, void 0];
+  }, [n]);
+  return /* @__PURE__ */ d("div", { className: "flex w-[168px] gap-1", children: [
+    /* @__PURE__ */ c(
+      u,
+      {
+        label: "Hours",
+        options: g,
+        selected: l,
+        onSelect: (t) => r(`${t}:${s ?? "00"}`, !1)
+      }
+    ),
+    /* @__PURE__ */ c(
+      u,
+      {
+        label: "Minutes",
+        options: y,
+        selected: s,
+        onSelect: (t) => r(`${l ?? "00"}:${t}`, !0)
+      }
+    )
+  ] });
+};
+export {
+  T as TimePickerPanel
+};

package/dist/components/New/Calendar/constants.js

@@ -1,57 +1,59 @@
 import { jsx as a } from "react/jsx-runtime";
-import { IconChevronRight as o, IconChevronLeft as n, IconCalendar as l } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as r } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
+import { IconChevronRight as o, IconChevronLeft as l, IconCalendar as n } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as r } from "../../../constants/icon.js";
 import { CalendarMode as e } from "../../../types/calendar.js";
-const u = "en-GB", f = {
+const p = "en-GB", f = {
   [e.Date]: "Select date",
   [e.DateTime]: "Select date and time",
   [e.Time]: "--:--",
   [e.Weekday]: "Select day"
-}, x = (
+}, b = (
   // TODO: check after design review for input
   "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"
 ), y = (
   // TODO: check after design review for input
   "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent"
-), b = "!border-error", h = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", C = "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", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
-  l,
+), x = "!border-error", h = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", v = "z-floating rounded-lg bg-layer-raised p-2 shadow-md", C = "absolute end-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-lg text-secondary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus disabled:cursor-not-allowed disabled:text-control-disable-primary disabled:hover:bg-transparent", g = "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", N = "bg-control-accent text-control-permanent", D = "text-accent dial-small-semi-text", I = "text-control-disable-primary", s = "text-secondary", w = /* @__PURE__ */ a(
+  n,
   {
-    size: t.MD,
-    stroke: r,
+    size: r.MD,
+    stroke: t,
     "aria-hidden": "true",
     className: s
   }
-), g = {
+), S = {
   prev: /* @__PURE__ */ a(
-    n,
+    l,
     {
-      size: t.SM,
-      stroke: r,
+      size: r.SM,
+      stroke: t,
       "aria-hidden": "true"
     }
   ),
   next: /* @__PURE__ */ a(
     o,
     {
-      size: t.SM,
-      stroke: r,
+      size: r.SM,
+      stroke: t,
       "aria-hidden": "true"
     }
   )
 };
 export {
-  u as DEFAULT_CALENDAR_LOCALE,
-  C as calendarDayButtonBaseClassName,
-  D as calendarDayOutsideClassName,
+  p as DEFAULT_CALENDAR_LOCALE,
+  g as calendarDayButtonBaseClassName,
+  I as calendarDayOutsideClassName,
   N as calendarDaySelectedClassName,
-  v as calendarDayTodayClassName,
-  x as calendarFieldBaseClassName,
+  D as calendarDayTodayClassName,
+  b as calendarFieldBaseClassName,
   y as calendarFieldDisabledClassName,
   s as calendarFieldIconClassName,
-  b as calendarFieldInvalidClassName,
-  I as calendarIcon,
+  x as calendarFieldInvalidClassName,
+  w as calendarIcon,
   f as calendarModeDefaultPlaceholder,
-  g as calendarNavIcons,
-  h as calendarPopoverClassName
+  S as calendarNavIcons,
+  h as calendarPopoverClassName,
+  C as timePickerButtonClassName,
+  v as timePickerPopoverClassName
 };

package/dist/components/New/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,147 @@
+import { jsx as d } from "react/jsx-runtime";
+import { IconArrowsHorizontal as O } from "@tabler/icons-react";
+import { useState as T, useRef as a, useEffect as Y, useCallback as U } from "react";
+import { DIAL_KIT_ICON_STROKE as $ } from "../constants/icon.js";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
+import { TooltipPlacement as b } from "../../../types/tooltip.js";
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+const G = 16, V = 1e3, Z = 4, h = (r) => r == null ? !1 : (r.closest("[dir]")?.getAttribute("dir") ?? r.ownerDocument.defaultView?.getComputedStyle(r).direction) === "rtl", se = ({
+  width: r,
+  minWidth: o,
+  maxWidth: s,
+  defaultWidth: R,
+  onWidthChange: f,
+  label: w,
+  tooltip: z,
+  keyboardStep: g = G,
+  className: S
+}) => {
+  const [y, D] = T(!1), [I, m] = T(!1), [k, A] = T(!1), c = a(null), C = a(null), p = a({ x: 0, y: 0 }), l = a(null), u = a(void 0), i = a(void 0);
+  Y(
+    () => () => {
+      clearTimeout(u.current), i.current != null && cancelAnimationFrame(i.current);
+    },
+    []
+  );
+  const P = U(
+    (e) => {
+      const t = Number.isFinite(e) ? e : o;
+      return Math.round(Math.min(s, Math.max(o, t)));
+    },
+    [s, o]
+  ), E = (e) => {
+    C.current?.style.setProperty(
+      "transform",
+      `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`
+    ), A(!0);
+  }, x = (e) => {
+    p.current = { x: e.clientX, y: e.clientY }, clearTimeout(u.current), u.current = setTimeout(() => m(!0), V);
+  }, M = (e) => {
+    E(e), x(e);
+  }, H = () => {
+    A(!1), clearTimeout(u.current), m(!1);
+  }, K = (e) => {
+    e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), l.current = { x: e.clientX, width: r }, D(!0));
+  }, N = (e) => {
+    E(e);
+    const t = l.current;
+    if (t == null) {
+      Math.hypot(
+        e.clientX - p.current.x,
+        e.clientY - p.current.y
+      ) > Z && (m(!1), x(e));
+      return;
+    }
+    const n = h(c.current) ? -1 : 1, F = P(t.width + (e.clientX - t.x) * n);
+    i.current != null && cancelAnimationFrame(i.current), i.current = requestAnimationFrame(() => f(F));
+  }, _ = (e) => {
+    l.current != null && (l.current = null, D(!1), e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId));
+  }, X = (e) => {
+    const t = h(c.current) ? -1 : 1;
+    let n;
+    switch (e.key) {
+      case "ArrowRight":
+        n = r + g * t;
+        break;
+      case "ArrowLeft":
+        n = r - g * t;
+        break;
+      case "Home":
+        n = o;
+        break;
+      case "End":
+        n = s;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault(), f(P(n));
+  }, v = () => {
+    R != null && f(P(R));
+  };
+  return (
+    /* A focusable separator is the ARIA window-splitter widget, so it is interactive. */
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": w,
+        "aria-valuenow": r,
+        "aria-valuemin": o,
+        "aria-valuemax": s,
+        tabIndex: 0,
+        className: L(
+          "absolute inset-y-0 end-0 -me-1 w-2 touch-none select-none",
+          "dial-resize-handle",
+          k && "dial-resize-handle-cursor-ready",
+          I && "dial-resize-handle-hover",
+          y && "dial-resize-handle-dragging",
+          S,
+          B.resizeHandle
+        ),
+        onPointerEnter: M,
+        onPointerLeave: H,
+        onPointerDown: K,
+        onPointerMove: N,
+        onPointerUp: _,
+        onPointerCancel: _,
+        onKeyDown: X,
+        onDoubleClick: v,
+        children: /* @__PURE__ */ d(
+          j,
+          {
+            tooltip: z,
+            open: I && !y,
+            placement: h(c.current) ? b.Left : b.Right,
+            asChild: !0,
+            children: /* @__PURE__ */ d(
+              "span",
+              {
+                ref: C,
+                "aria-hidden": "true",
+                className: L(
+                  "pointer-events-none fixed top-0 left-0 z-tooltip hidden text-secondary",
+                  "dial-resize-handle-arrow"
+                ),
+                children: /* @__PURE__ */ d(
+                  O,
+                  {
+                    size: q.LG,
+                    stroke: $
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  );
+};
+export {
+  se as ResizeHandle
+};

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.20",
-  "generatedAt": "2026-10-20T10:24:28.217Z",
+  "version": "0.16.0-dev.22",
+  "generatedAt": "2026-10-20T15:37:27.298Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -423,7 +423,7 @@
     },
     {
       "name": "Calendar",
-      "category": "Components_2_0",
+      "category": "Components_2_0/Calendar",
       "generation": "2.0",
       "description": "A date/time picker supporting four selection modes.\naliases: DatePicker|DateTimePicker\nDesign system 2.0\n\nRenders a text-field trigger that opens a rounded month-grid popover for\nthe `date`/`datetime` modes, a masked `\"HH:mm\"` text field for `time`, and\na popover list of weekday names for `weekday`. Month/weekday names and\ndate formatting are localized via the `locale` prop.",
       "props": [
@@ -521,6 +521,13 @@
           "required": false,
           "defaultValue": "false",
           "description": "Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the time fields (`time` mode and the `datetime` popover footer)"
+        },
+        {
+          "name": "showTimePicker",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "`time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field"
         }
       ],
       "examples": [
@@ -4967,6 +4974,73 @@
       ],
       "sourceFile": "components/New/ResizableContainer/ResizableContainer.tsx"
     },
+    {
+      "name": "ResizeHandle",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A vertical separator on the inline-end edge of a panel that resizes the panel\nby pointer or keyboard.\naliases: Splitter|ColumnResizer|DragHandle|Divider\nDesign system 2.0\n\nThe component is controlled: it reports every width through `onWidthChange`\nand the host applies it to the panel. It is a focusable `separator` — the\nwindow-splitter pattern — so the arrow keys move it by `keyboardStep`, `Home`\nand `End` jump to the bounds, and a double click resets it to `defaultWidth`.\nDrag and keys follow the writing direction, so a panel at the inline start\ngrows as the pointer moves towards the inline end, in RTL as well.\n\nIt is positioned absolutely against its nearest positioned ancestor, over the\npanel's inline-end edge, and draws a thin line. The accent line and the hint\nappear once the pointer has rested on the handle, and a themed arrow follows\nthe pointer instead of the native cursor. Hide it on screens too narrow to\ndrag on by wrapping it, e.g. in `hidden desktop:block`.",
+      "props": [
+        {
+          "name": "width",
+          "type": "number",
+          "required": true,
+          "description": "Current width of the panel in px."
+        },
+        {
+          "name": "minWidth",
+          "type": "number",
+          "required": true,
+          "description": "Smallest width in px."
+        },
+        {
+          "name": "maxWidth",
+          "type": "number",
+          "required": true,
+          "description": "Largest width in px."
+        },
+        {
+          "name": "defaultWidth",
+          "type": "number",
+          "required": false,
+          "description": "Width a double click resets to."
+        },
+        {
+          "name": "onWidthChange",
+          "type": "(width: number) => void",
+          "required": true,
+          "description": "Called with the next, limited width."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Accessible name of the separator."
+        },
+        {
+          "name": "tooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Hint shown beside the pointer once it rests on the handle."
+        },
+        {
+          "name": "keyboardStep",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DEFAULT_KEYBOARD_STEP",
+          "description": "Width change of one arrow key press in px."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the handle."
+        }
+      ],
+      "examples": [
+        "<div className=\"relative\" style={{ width }}>\n  <Sidebar />\n  <ResizeHandle\n    width={width}\n    minWidth={280}\n    maxWidth={640}\n    defaultWidth={400}\n    onWidthChange={setWidth}\n    label=\"Resize sidebar\"\n    tooltip=\"Drag to resize\"\n  />\n</div>"
+      ],
+      "sourceFile": "components/New/ResizeHandle/ResizeHandle.tsx"
+    },
     {
       "name": "ConditionalResizableContainer",
       "category": "Components_2_0",
@@ -11671,7 +11745,7 @@
     {
       "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  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\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 `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\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  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\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  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\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 `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-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 root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\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  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\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"
+      "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  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\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  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\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  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\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  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\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 `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-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 root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\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  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\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

@@ -39,6 +39,8 @@ const i = {
   collapsibleSidebar: "dial-kit-collapsible-sidebar",
   /** The content box inside a `ResizableContainer`'s resize frame. */
   resizableContainer: "dial-kit-resizable-container",
+  /** The `role="separator"` element of a `ResizeHandle`. */
+  resizeHandle: "dial-kit-resize-handle",
   /**
    * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
    * `overlayClassName`.