@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.60

package/dist/migration-guides/0.16.0/legacy-file-manager-removal.md

@@ -0,0 +1,91 @@
+# Migrating the legacy `DialFileManager` — v0.15 → v0.16
+
+## Why this changed
+
+The file manager lives in its own package, `@epam/ai-dial-react-file-manager`,
+which is where it is developed and what DIAL Chat already uses. The kit still
+shipped the older copy, and the two drifted apart. Keeping both meant two
+`DialFileManager` exports with the same name and different behaviour, and the
+kit's copy pulled the legacy `DialGrid` and AG Grid into every consumer of the
+`./file-manager` subpath. The copy in the kit is removed. The standalone package
+is the only file manager.
+
+## What changed
+
+Every name below is gone from `@epam/ai-dial-ui-kit`, and the
+`@epam/ai-dial-ui-kit/file-manager` subpath is gone with them. Each name is
+exported under the same name by `@epam/ai-dial-react-file-manager`.
+
+| Kind              | Removed from `@epam/ai-dial-ui-kit`                                                                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Components        | `DialFileManager`, `DialFoldersTree`, `DialDestinationFolderPopup`                                                                                                                               |
+| Context and hooks | `FileManagerProvider`, `useFileManagerContext`, `useDialFileManagerTabs`                                                                                                                         |
+| Enums             | `DialFileManagerTabs`, `DialFileManagerActions`, `FileManagerColumnKey`                                                                                                                          |
+| Column constants  | `NAME_COLUMN`, `SIZE_COLUMN`, `UPDATED_AT_COLUMN`                                                                                                                                                |
+| Types             | `FileManagerGridRow`, `GridOptions`, `ToolbarOptions`, `BulkActionsToolbarOptions`, `DialCopiedItem`, `DialDeletedItem`, `DialUploadFileItem`, `DialFileManagerActionsRef`, `DialFileAcceptType` |
+| Package subpath   | `@epam/ai-dial-ui-kit/file-manager`                                                                                                                                                              |
+
+These stay in the kit: `DialFile`, `DialRootFolder`, `DialFileNodeType`,
+`DialFilePermission`, `DialFileResourceType`, `DialItemType`,
+`wrapInRootFolder` and `useEditableItem`, plus the 2.0 `FileIcon`, `FileName`,
+`FolderName`, `SharedEntityIndicator` and `TransferQueue`. The 1.0
+`DialFileName`, `DialFolderName`, `DialFileIcon` and
+`DialSharedEntityIndicator` are removed in the same release — see
+[unused-legacy-components-removal](unused-legacy-components-removal.md).
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rnE "ai-dial-ui-kit/file-manager|\b(DialFileManager|DialFoldersTree|DialDestinationFolderPopup|FileManagerProvider|useFileManagerContext|useDialFileManagerTabs|DialFileManagerTabs|DialFileManagerActions|FileManagerColumnKey|NAME_COLUMN|SIZE_COLUMN|UPDATED_AT_COLUMN|FileManagerGridRow|GridOptions|ToolbarOptions|BulkActionsToolbarOptions|DialCopiedItem|DialDeletedItem|DialUploadFileItem|DialFileManagerActionsRef|DialFileAcceptType)\b" src/
+```
+
+### 2. Install the standalone package
+
+```bash
+npm install @epam/ai-dial-react-file-manager
+```
+
+### 3. Move the imports
+
+Import the removed names from the standalone package. The kit's other names
+keep their kit import.
+
+**Before:**
+
+```tsx
+import {
+  DialFileManager,
+  DialFileManagerTabs,
+  DialFileName,
+} from '@epam/ai-dial-ui-kit';
+// or
+import { DialFileManager } from '@epam/ai-dial-ui-kit/file-manager';
+```
+
+**After:**
+
+```tsx
+import {
+  DialFileManager,
+  DialFileManagerTabs,
+} from '@epam/ai-dial-react-file-manager';
+import { DialFileName } from '@epam/ai-dial-ui-kit';
+```
+
+The standalone package has its own props and releases, so check its
+documentation for any prop that changed since the copy in the kit was forked.
+
+### 4. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+## Notes
+
+- The SVG icons used only by the old file manager (`add-child`, `add-sibling`,
+  `copy-to`, `move-to`, `unshare`) are removed as well. They were never
+  exported, so only a deep import into `dist/` would notice.

package/dist/migration-guides/0.16.0/tailwind-v4-stylesheet.md

@@ -0,0 +1,98 @@
+# Migrating to the Tailwind CSS v4 stylesheet — v0.15.x → v0.16.0
+
+## Why this changed
+
+The kit's `styles.css` is now built with Tailwind CSS v4 instead of v3. `tailwind-merge`, which the components use to merge class names, already targets v4 class names, so the kit had been merging against one Tailwind version while building with another.
+
+Class names, props and theme variables are unchanged. What changed is how the shipped stylesheet takes part in your page's cascade and what its preflight resets. Typecheck cannot detect either change, so they show up only when the page is rendered.
+
+## What changed
+
+| Area                                                                                                       | v0.15.x (Tailwind v3)                              | v0.16.0 (Tailwind v4)                       |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------- |
+| Variant utilities (`hover:`, `focus-visible:`, `disabled:`, `placeholder:`, `before:`, `mobile:`, `md:` …) | Unlayered, after `@layer ui`                       | Inside `@layer ui`                          |
+| Base utilities (`flex`, `bg-*`, `text-*` …)                                                                | `@layer ui`                                        | `@layer ui` (now `ui.utilities`)            |
+| Kit classes (`dial-*`, `dial-kit-*`)                                                                       | Unlayered                                          | Unlayered                                   |
+| `hover:` utilities                                                                                         | Applied on every device                            | Applied only where `(hover: hover)` matches |
+| `input`, `select`, `textarea`                                                                              | Browser default background and radius              | Transparent background, no radius           |
+| `margin` / `padding` reset                                                                                 | Listed elements (`h1`–`h6`, `p`, `ul`, `button` …) | Every element                               |
+| `[hidden]`                                                                                                 | `display: none`                                    | `display: none !important`                  |
+| Placeholder colour, pointer cursor on buttons, centred `<dialog>`                                          | v3 values                                          | Unchanged: the kit keeps the v3 values      |
+| Tailwind theme variables on `:root`                                                                        | None                                               | None: values are written into the utilities |
+| Browser baseline                                                                                           | Native CSS nesting (Safari 16.5+, Chrome 112+)     | Safari 16.4+, Chrome 111+, Firefox 128+     |
+
+### Variant utilities and your own CSS
+
+The kit puts Tailwind in a cascade layer named `ui` so that unlayered CSS (your app's styles and the kit's own `dial-*` classes) always beats a plain utility. Tailwind v3 placed variant utilities outside that layer. They competed with your unlayered CSS on specificity and source order, and often won, because `.hover\:bg-x:hover` is more specific than a single class.
+
+In v4 they are inside `@layer ui`, so any unlayered rule in your app that sets the same property now wins. For example, take a kit element with a `hover:` background. If your stylesheet also sets that element's `background-color`, the hover state disappears.
+
+## Step-by-step migration
+
+### 1. Find CSS that targets kit elements
+
+Look for unlayered rules in your app that style elements the kit renders, especially rules that set colour, background, border or outline:
+
+```bash
+grep -rnE "\.dial-|\[class\*=\"dial-|\.ag-" src/ --include=*.css --include=*.scss
+```
+
+Where such a rule should give way to the kit's interactive states, put it in a layer that comes before `ui`, or scope it to the resting state:
+
+**Before:**
+
+```css
+.my-toolbar .dial-kit-primary-ghost-button {
+  background-color: var(--my-toolbar-bg);
+}
+```
+
+**After:**
+
+```css
+@layer app {
+  .my-toolbar .dial-kit-primary-ghost-button {
+    background-color: var(--my-toolbar-bg);
+  }
+}
+```
+
+Declare the order once, before the kit's stylesheet is loaded: `@layer app, ui;`.
+
+### 2. Restore form-control defaults if your page relied on them
+
+The kit's preflight reaches every element on the page, not only the kit's own. If your own `input`, `select` or `textarea` elements carry no background or radius class and should keep the browser's look, restore it in your stylesheet:
+
+```css
+input,
+select,
+textarea {
+  background-color: Field;
+  border-radius: revert;
+}
+```
+
+The same applies to elements that relied on the browser's default `margin` or `padding` (`td`, `option`): set them explicitly.
+
+### 3. Check `hidden` elements
+
+An element with the `hidden` attribute is now hidden even when it also has a display utility such as `flex`. If you toggle visibility with both, drop the attribute or the utility.
+
+### 4. Check touch devices
+
+`hover:` utilities no longer apply on devices without a hovering pointer, so a state that a tap used to trigger as a "sticky hover" no longer shows. Use `active:` or `focus-visible:` where a touch state is intended.
+
+### 5. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+Then open the screens that use the kit in a desktop browser and on a touch device, and check hover, focus and disabled states, form fields and popups.
+
+## Notes
+
+- Hosts that build with Tailwind v4 themselves keep their own theme. The kit writes theme values directly into its utilities and declares no `--font-sans`, `--spacing`, `--radius-*` or `--color-*` on `:root`, so it cannot override yours.
+- The kit's stylesheet registers Tailwind v4's `--tw-*` custom properties (`@property`) and declares a top-level `@layer properties`. A host on Tailwind v4 declares the same names with the same definitions.
+- `@apply dial-…` against the kit's classes was not supported before and is still not supported. Tailwind v4's `@apply` accepts only utilities.

package/dist/migration-guides/0.16.0/unused-legacy-components-removal.md

@@ -0,0 +1,128 @@
+# Migrating off the removed 1.0 components — v0.15 → v0.16
+
+## Why this changed
+
+Most 1.0 `Dial*` components have had a 2.0 replacement for several releases,
+and the applications built on the kit — DIAL Chat and the DIAL Admin frontend —
+no longer use the 1.0 versions listed below. Keeping them meant two components
+for one control in the public API, two sets of tests and stories to maintain,
+and Monaco shipped as an optional peer only for the 1.0 JSON editor. They are
+removed. The 1.0 components that are still in use — `DialTabs`, `DialSteps`,
+`DialLabelledText`, `DialLoadFileArea`, the `DialAnalytics*` set and the
+building blocks they render — stay.
+
+## What changed
+
+### Components and their replacements
+
+Every name in the first column is gone from `@epam/ai-dial-ui-kit`. Use the 2.0
+component in the second column, imported from the same package. The 2.0
+components have their own props, so this is a rewrite of the call site, not a
+rename — check each one's story for its API.
+
+| Removed                                                                                              | Use instead                                                           |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `DialAutocompleteInputValue`                                                                         | `AutocompleteTagInput`                                                |
+| `DialButtonDropdown`                                                                                 | `ButtonDropdown`                                                      |
+| `DialCheckbox`                                                                                       | `Checkbox`                                                            |
+| `DialCollapsibleSidebar`                                                                             | `CollapsibleSidebar`                                                  |
+| `DialConfirmationPopup`                                                                              | `ConfirmationPopup`                                                   |
+| `DialDropdownIcon`, `DialDropdownIconProps`                                                          | `Dropdown` with an `IconButton` trigger                               |
+| `DialFileIcon`, `DialFileIconProps`                                                                  | `FileIcon`                                                            |
+| `DialFileName`                                                                                       | `FileName`                                                            |
+| `DialFolderName`                                                                                     | `FolderName`                                                          |
+| `DialFormItem`, `FormItemOrientation`                                                                | The 2.0 field's own `labelProps`, `caption` and `error`               |
+| `DialFormPopup`, `DialPopup`                                                                         | `Popup`                                                               |
+| `DialGrid`, `DialGridProps`                                                                          | `Grid`, `GridProps`                                                   |
+| `DialDateCellRenderer`, `DialDateCellRendererProps`, `DialGridDateValue`                             | `DateCellRenderer`, `DateCellRendererProps`, `DateValue`              |
+| `DEFAULT_GRID_DATE_FORMAT_OPTIONS`, `DEFAULT_GRID_DATE_LOCALE`, `convertGridDateToDate`              | `DEFAULT_DATE_FORMAT_OPTIONS`, `DEFAULT_DATE_LOCALE`, `convertToDate` |
+| `LazyDialMarkdownEditor`, `LazyDialMarkdownEditorContainer`, `DialMarkdownEditorContainerProps`      | `LazyMarkdownEditor`, `MarkdownEditorProps` — there is no JSON mode   |
+| `DialNotification`, `DialNotificationProps`                                                          | `Notification`                                                        |
+| `DialNumberInput`                                                                                    | `NumberInput`                                                         |
+| `DialPasswordInput`                                                                                  | `PasswordInput`                                                       |
+| `DialRadioButton`                                                                                    | `Radio`                                                               |
+| `DialRadioGroup`                                                                                     | `RadioGroup`                                                          |
+| `DialRadioGroupPopupField`                                                                           | `RadioGroupPopupField`                                                |
+| `DialResizableContainer`, `DialConditionalResizableContainer`                                        | `ResizableContainer`                                                  |
+| `DialSchemaRenderer`, `DialSchemaRendererProps`                                                      | `SchemaRenderer`, `SchemaRendererProps`                               |
+| `DialSearch`, `DialSearchProps`                                                                      | `Search`                                                              |
+| `DialSegmentedControl`, `DialSegmentedControlProps`, `SegmentedControlOption`                        | `SegmentedControl`                                                    |
+| `DialSelect`, `DialSelectField`, `SelectSize`, `SelectVariant`                                       | `Select`                                                              |
+| `DialSharedEntityIndicator`                                                                          | `SharedEntityIndicator`                                               |
+| `DialSlider`, `DialSliderProps`                                                                      | `Slider`                                                              |
+| `DialSwitch`                                                                                         | `Switch`                                                              |
+| `DialTagInput`                                                                                       | `TagInput`                                                            |
+| `DialTextarea`                                                                                       | `Textarea`                                                            |
+| `LazyDialJsonEditor`, `DialDraggableItem`, `DialInputPopup`, `DialPagination`, `DialPaginationProps` | No replacement in the kit                                             |
+
+The schema types keep their names and import path: `JsonSchema`,
+`JsonSchemaDef`, `ValidationError`, `SchemaRendererTexts`,
+`SchemaRendererVariant`, `SchemaDisplayMode`, `SchemaOrientation` and
+`JsonSchemaType` are still exported from `@epam/ai-dial-ui-kit`.
+
+### Subpaths
+
+| Subpath                        | Removed                                                                                                                                               |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@epam/ai-dial-ui-kit/grid`    | `DialGrid`, `DialGridProps`, `DialDateCellRenderer`, `DialDateCellRendererProps`, `DialGridDateValue`, `DEFAULT_GRID_DATE_*`, `convertGridDateToDate` |
+| `@epam/ai-dial-ui-kit/editors` | `LazyDialJsonEditor`, `LazyDialMarkdownEditor`, `LazyDialMarkdownEditorContainer`, `DialMarkdownEditorContainerProps`                                 |
+
+### Peer dependencies
+
+`monaco-editor` and `@monaco-editor/react` are no longer optional peers: only
+the removed JSON editor used them.
+
+### Public class names and stylesheet
+
+- `DIAL_KIT_CLASS.dropdownIcon` (`dial-kit-dropdown-icon`) and
+  `DIAL_KIT_CLASS.dropdownIconCaret` (`dial-kit-dropdown-icon-caret`) are
+  removed with `DialDropdownIcon`.
+- `styles.css` no longer contains the rules only the removed components used:
+  `dial-popup`, `dial-sm-popup`, `dial-md-popup`, `dial-lg-popup`,
+  `dial-danger-popup`, `dial-input-radio`, `dial-pagination-dot` and
+  `dial-textarea`.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rnE "\b(DialAutocompleteInputValue|DialButtonDropdown|DialCheckbox|DialCollapsibleSidebar|DialConfirmationPopup|DialDropdownIcon(Props)?|DialFileIcon(Props)?|DialFileName|DialFolderName|DialFormItem|FormItemOrientation|DialFormPopup|DialPopup|DialGrid(Props|DateValue)?|DialDateCellRenderer(Props)?|DEFAULT_GRID_DATE_FORMAT_OPTIONS|DEFAULT_GRID_DATE_LOCALE|convertGridDateToDate|LazyDialJsonEditor|LazyDialMarkdownEditor(Container)?|DialMarkdownEditorContainerProps|DialNotification(Props)?|DialNumberInput|DialPasswordInput|DialRadioButton|DialRadioGroup(PopupField)?|DialResizableContainer|DialConditionalResizableContainer|DialSchemaRenderer(Props)?|DialSearch(Props)?|DialSegmentedControl(Props)?|SegmentedControlOption|DialSelect|DialSelectField|SelectSize|SelectVariant|DialSharedEntityIndicator|DialSlider(Props)?|DialSwitch|DialTagInput|DialTextarea|DialDraggableItem|DialInputPopup|DialPagination(Props)?)\b|dial-kit-dropdown-icon|dial-(sm-|md-|lg-|danger-)?popup\b|dial-input-radio|dial-pagination-dot|dial-textarea\b" src/
+```
+
+### 2. Replace each component with its 2.0 counterpart
+
+**Before:**
+
+```tsx
+import { DialSelect, DialSwitch, DialPopup } from '@epam/ai-dial-ui-kit';
+import { DialGrid } from '@epam/ai-dial-ui-kit/grid';
+```
+
+**After:**
+
+```tsx
+import { Popup, Select, Switch } from '@epam/ai-dial-ui-kit';
+import { Grid } from '@epam/ai-dial-ui-kit/grid';
+```
+
+Then adjust the props at each call site to the 2.0 component's API — its
+Storybook story lists them.
+
+### 3. Drop Monaco if you installed it only for the kit
+
+```bash
+npm uninstall monaco-editor @monaco-editor/react
+```
+
+### 4. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+## Notes
+
+- If your own markup used one of the removed `dial-*` classes from
+  `styles.css`, move its declarations into your own stylesheet.

package/dist/migration-guides/README.md

@@ -30,6 +30,11 @@ migration-guides/
 | 0.14.0 | [shadow-token-per-step-rename](0.14.0/shadow-token-per-step-rename.md) | Shadow scale rebuilt per step: `sm` moves to the side panels, controls keep their shadow under `dial-kit-control-shadow` |
 | 0.15.0 | [legacy-theme-variable-fallbacks-removal](0.15.0/legacy-theme-variable-fallbacks-removal.md) | Old theme variable names (`--bg-control-neutral-hover`, `--stroke-focus-black`, `--bg-control-accent-gradient-*`) dropped from the fallback chains |
 | 0.15.0 | [slider-redesign](0.15.0/slider-redesign.md) | `Slider` redrawn: 12px accent thumb with a hover/focus halo, accent-tint track; adds `showTooltip`, `showTicks`, `leftContent`, `rightContent` |
+| 0.16.0 | [tailwind-v4-stylesheet](0.16.0/tailwind-v4-stylesheet.md) | `styles.css` built with Tailwind v4: variant utilities move into `@layer ui`, v4 preflight, new browser baseline |
+| 0.16.0 | [legacy-file-manager-removal](0.16.0/legacy-file-manager-removal.md) | Legacy `DialFileManager`, its helpers and the `./file-manager` subpath removed; import them from `@epam/ai-dial-react-file-manager` |
+| 0.16.0 | [caption-text-no-alert-role](0.16.0/caption-text-no-alert-role.md) | `CaptionText` / `ErrorText` drop `role="alert"`; 2.0 fields link their error and caption through `aria-describedby` |
+| 0.16.0 | [legacy-analytics-and-steps-removal](0.16.0/legacy-analytics-and-steps-removal.md) | Legacy `DialAnalytics*` components and 1.0 `DialSteps` removed; use the 2.0 `Analytics*` components and `Steps` |
+| 0.16.0 | [unused-legacy-components-removal](0.16.0/unused-legacy-components-removal.md) | 34 unused 1.0 components (`DialSelect`, `DialPopup`, `DialGrid`, `LazyDialJsonEditor` …) and `DialSchemaRenderer` removed in favour of their 2.0 counterparts; Monaco is no longer a peer |
 
 ---
 

package/dist/node_modules/react-dnd/dist/hooks/useCollector.js

@@ -1,4 +1,4 @@
-import s from "../../../../_virtual/index3.js";
+import s from "../../../../_virtual/index.js";
 import { useState as f, useCallback as a } from "react";
 import { useIsomorphicLayoutEffect as i } from "./useIsomorphicLayoutEffect.js";
 function n(e, c, t) {

package/dist/node_modules/react-dnd/dist/internals/registration.js

@@ -1,18 +1,10 @@
-function s(t, o, g) {
-  const e = g.getRegistry(), r = e.addTarget(t, o);
+function n(r, g, a) {
+  const t = a.getRegistry(), e = t.addTarget(r, g);
   return [
-    r,
-    () => e.removeTarget(r)
-  ];
-}
-function c(t, o, g) {
-  const e = g.getRegistry(), r = e.addSource(t, o);
-  return [
-    r,
-    () => e.removeSource(r)
+    e,
+    () => t.removeTarget(e)
   ];
 }
 export {
-  c as registerSource,
-  s as registerTarget
+  n as registerTarget
 };

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

@@ -5,4 +5,4 @@ export declare const dropdownItemDisabledClassName = "opacity-75 !cursor-not-all
 export declare const dropdownItemDangerClassName = "text-error";
 export declare const dropdownDividerClassName = "my-1 border-t border-hover border-secondary";
 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/{Analytics → New/Analytics}/Bar/Bar.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsBarProps {
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsBarProps {
     /**
      * Current value used to size and color the bar. Pass `null` when there is no
      * data (em dash, no progress bar). Omit it when `error` is set.
@@ -48,7 +48,7 @@ export interface DialAnalyticsBarProps {
  * A compact analytics meter: a horizontal bar whose fill width and color reflect a
  * value relative to `maxValue`, with an optional title on the left and value on the right.
  * aliases: MetricBar|Meter|ScoreBar
- * Design system 1.0
+ * Design system 2.0
  *
  * The fill color is resolved from `colorMap` based on the normalized ratio
  * (`value / maxValue`), so the bar shifts hue as the value grows. An empty bar
@@ -57,12 +57,12 @@ export interface DialAnalyticsBarProps {
  *
  * @example
  * ```tsx
- * <DialAnalyticsBar title="Relevance" value={0.82} valueLabel="82%" />
+ * <AnalyticsBar title="Relevance" value={0.82} valueLabel="82%" />
  * ```
  *
  * @example
  * ```tsx
- * <DialAnalyticsBar
+ * <AnalyticsBar
  *   title="Score"
  *   value={640}
  *   maxValue={1000}
@@ -83,4 +83,4 @@ export interface DialAnalyticsBarProps {
  * @param [inline] - Renders the title and bar on a single row (50% / 50%).
  * @param [ariaLabel] - Accessible label for the bar.
  */
-export declare const DialAnalyticsBar: FC<DialAnalyticsBarProps>;
+export declare const AnalyticsBar: FC<AnalyticsBarProps>;

package/dist/src/components/{Analytics → New/Analytics}/Bar/utils.d.ts

@@ -1,4 +1,4 @@
-import { AnalyticsBarColorStop } from '../../../models/analytics';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
 /**
  * Default color map for {@link DialAnalyticsBar}, expressed as ratios (value / maxValue).
  * A value of `0` leaves the bar empty (track shows through); a value at the maximum

package/dist/src/components/{Analytics → New/Analytics}/BarGroup/BarGroup.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsBarGroupProps {
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsBarGroupProps {
     /** Title passed to the accordion header. */
     title: ReactNode;
     /** Tooltip shown when hovering the accordion header title. */
@@ -67,15 +67,15 @@ export interface DialAnalyticsBarGroupProps {
 }
 /**
  * A collapsible group of analytics bars built from a key/value map. Wraps
- * {@link DialAccordion}: the `title` is shown in the header, the number of entries
- * is shown as the header description, and each entry renders a {@link DialAnalyticsBar}
+ * {@link Accordion}: the `title` is shown in the header, the number of entries
+ * is shown as the header description, and each entry renders a {@link AnalyticsBar}
  * with the key as its title and the value as its value.
  * aliases: MetricBarGroup|BarList|NumericResults
- * Design system 1.0
+ * Design system 2.0
  *
  * @example
  * ```tsx
- * <DialAnalyticsBarGroup
+ * <AnalyticsBarGroup
  *   title="Relevance"
  *   data={{ accuracy: 0.82, recall: 0.64, precision: 0.91 }}
  * />
@@ -100,4 +100,4 @@ export interface DialAnalyticsBarGroupProps {
  * @param [barDescriptions] - Map of bar key to tooltip content. Hovering each bar shows its description.
  * @param [className] - Additional CSS classes for the accordion container.
  */
-export declare const DialAnalyticsBarGroup: FC<DialAnalyticsBarGroupProps>;
+export declare const AnalyticsBarGroup: FC<AnalyticsBarGroupProps>;

package/dist/src/components/{Analytics → New/Analytics}/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsCardCompareItem } from '../../../models/analytics';
-import { AnalyticsCardVariant } from '../../../types/analytics';
-export interface DialAnalyticsCardProps {
+import { AnalyticsCardCompareItem } from '../../../../models/analytics';
+import { AnalyticsCardVariant } from '../../../../types/analytics';
+export interface AnalyticsCardProps {
     title: ReactNode;
     value?: ReactNode;
     description?: ReactNode;
@@ -41,7 +41,7 @@ export interface DialAnalyticsCardProps {
  * A simple analytics summary card that displays a single metric as a title,
  * a prominent value, and an optional description.
  * aliases: MetricCard|StatCard|KpiCard
- * Design system 1.0
+ * Design system 2.0
  *
  * Two visual variants are available via the {@link AnalyticsCardVariant} enum:
  * - `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.
@@ -55,7 +55,7 @@ export interface DialAnalyticsCardProps {
  *
  * @example
  * ```tsx
- * <DialAnalyticsCard
+ * <AnalyticsCard
  *   title="Total requests"
  *   value="12,480"
  *   description="+12% vs last week"
@@ -64,7 +64,7 @@ export interface DialAnalyticsCardProps {
  *
  * @example
  * ```tsx
- * <DialAnalyticsCard
+ * <AnalyticsCard
  *   title="Response time"
  *   delta={9}
  *   deltaUnit="s"
@@ -88,4 +88,4 @@ export interface DialAnalyticsCardProps {
  * @param [deltaUnit] - Suffix appended to the formatted delta (e.g. `"s"` → `+9s`).
  * @param [compareValues] - Enables compare mode with two side-by-side metrics.
  */
-export declare const DialAnalyticsCard: FC<DialAnalyticsCardProps>;
+export declare const AnalyticsCard: FC<AnalyticsCardProps>;

package/dist/src/components/{Analytics → New/Analytics}/Histogram/Histogram.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsHistogramProps {
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsHistogramProps {
     /** Title rendered above the histogram. */
     title: ReactNode;
     /** Values to distribute across the columns. */
@@ -34,11 +34,11 @@ export interface DialAnalyticsHistogramProps {
  * along the bottom. Hovering a column reveals a tooltip with its share of the
  * total.
  * aliases: Distribution|ColumnChart|FrequencyChart
- * Design system 1.0
+ * Design system 2.0
  *
  * @example
  * ```tsx
- * <DialAnalyticsHistogram
+ * <AnalyticsHistogram
  *   title="Score distribution"
  *   values={[0.1, 0.15, 0.4, 0.42, 0.43, 0.9, 1]}
  *   valueTitle="responses"
@@ -56,4 +56,4 @@ export interface DialAnalyticsHistogramProps {
  * @param [valueSetLabel] - Label for the primary values set (compare mode tooltip).
  * @param [compareValueSetLabel] - Label for the compare values set (compare mode tooltip).
  */
-export declare const DialAnalyticsHistogram: FC<DialAnalyticsHistogramProps>;
+export declare const AnalyticsHistogram: FC<AnalyticsHistogramProps>;

package/dist/src/components/{Analytics → New/Analytics}/Histogram/utils.d.ts

@@ -1,4 +1,4 @@
-import { AnalyticsBarColorStop } from '../../../models/analytics';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
 /** Fill color for the zero-bucket column (values of exactly `0`). */
 export declare const ZERO_BUCKET_COLOR = "#FF4E50";
 export interface AnalyticsHistogramColumn {

package/dist/src/components/New/Analytics/index.d.ts

@@ -0,0 +1,11 @@
+export { AnalyticsCard } from './Card/Card';
+export type { AnalyticsCardProps } from './Card/Card';
+export { AnalyticsCardVariant } from '../../../types/analytics';
+export { AnalyticsBar } from './Bar/Bar';
+export type { AnalyticsBarProps } from './Bar/Bar';
+export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './Bar/utils';
+export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from '../../../models/analytics';
+export { AnalyticsBarGroup } from './BarGroup/BarGroup';
+export type { AnalyticsBarGroupProps } from './BarGroup/BarGroup';
+export { AnalyticsHistogram } from './Histogram/Histogram';
+export type { AnalyticsHistogramProps } from './Histogram/Histogram';

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

@@ -21,6 +21,8 @@ export interface AvatarProps {
     className?: string;
     /** Type-scale class for the initials. When set, it replaces the font size derived from `size`. */
     textClassName?: string;
+    /** Additional CSS classes applied only while the image is shown, e.g. a plate behind a transparent icon. */
+    imageClassName?: string;
     /** Called when the image fails to load, after the avatar has switched to initials. */
     onImageError?: (event: SyntheticEvent<HTMLImageElement>) => void;
 }
@@ -56,6 +58,7 @@ export interface AvatarProps {
  * @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 [imageClassName] - Additional CSS classes applied only while the image is shown
  * @param [onImageError] - Called when the image fails to load
  */
 export declare const Avatar: FC<AvatarProps>;

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/Calendar.d.ts

@@ -15,6 +15,12 @@ export interface CalendarProps {
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /**
+     * Ids of elements describing the field — typically an error rendered next
+     * to it. Lands on the focusable control: the masked input in `time` mode,
+     * the popover trigger otherwise.
+     */
+    ariaDescribedBy?: string;
     id?: string;
     className?: string;
     minDate?: Date;
@@ -24,10 +30,17 @@ export interface CalendarProps {
     fieldClassName?: string;
     /**
      * Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`, computed
-     * by `getTimezoneLabel`) at the trailing edge of the `time` field, naming
+     * by `getTimezoneLabel`) at the trailing edge of the time fields — the
+     * `time` mode field and the `datetime` popover footer's field — naming
      * the zone the entered time-of-day refers to.
      */
     showTimezone?: boolean;
+    /**
+     * `time` mode only: shows a clock button at the field's trailing edge that
+     * opens an hour/minute list popover. The field stays typeable either way.
+     * @default true
+     */
+    showTimePicker?: boolean;
 }
 /**
  * A date/time picker supporting four selection modes.
@@ -57,12 +70,14 @@ export interface CalendarProps {
  * @param [placeholder] - Placeholder shown when there is no value; defaults to a mode-appropriate string ("Select date", "Select date and time", "--:--" or "Select day")
  * @param [disabled=false] - Disables the control
  * @param [invalid=false] - Applies error styling
+ * @param [ariaDescribedBy] - Ids of elements describing the field (e.g. its error), set on the focusable control
  * @param [id] - id applied to the control, linked to the label
  * @param [className] - Additional CSS classes applied to the outer container
  * @param [minDate] - Earliest selectable date (date/datetime modes)
  * @param [maxDate] - Latest selectable date (date/datetime modes)
  * @param [locale="en-GB"] - BCP 47 locale tag used to localize month/weekday names and date formatting
  * @param [fieldClassName] - Additional classes merged onto the trigger field, overriding conflicting defaults
- * @param [showTimezone=false] - Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the `time` field
+ * @param [showTimezone=false] - 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)
+ * @param [showTimePicker=true] - `time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field
  */
 export declare const Calendar: FC<CalendarProps>;