@epam/ai-dial-ui-kit 0.14.0-dev.2 → 0.14.0-dev.23

package/dist/migration-guides/0.14.0/focus-border-token-role-naming.md

@@ -0,0 +1,87 @@
+# Migrating the focus border tokens back to role names — v0.13.0 → v0.14.0
+
+## Why this changed
+
+0.13.0 renamed the `focus` border token to `focus-black`, on the reasoning that a token should be named for its value so that `focus-black` and `focus-blue` read as siblings. See the [0.13.0 guide](../0.13.0/focus-border-token-rename.md) for that step.
+
+That naming does not survive contact with the rest of the border scale, which is named by **role** throughout: `primary`, `secondary`, `accent`, `accent-alpha`, `error-alpha`. Under a dark theme `focus-black` is not black, so the value it was named after is wrong exactly when it matters most. The two tokens are now:
+
+- `focus` — the default focus ring (grey-1000 in the light palette).
+- `accent-focus` — the accent focus ring (blue-200), used where the ring sits on an accent-filled control.
+
+`border-focus` / `outline-focus` / `divide-focus` / `stroke-focus` are therefore back to the names they had in 0.12.x. **The colours are unchanged**, and so are the CSS variables.
+
+## What changed
+
+| Before (0.13.0)       | After (0.14.0)         |
+| --------------------- | ---------------------- |
+| `border-focus-black`  | `border-focus`         |
+| `outline-focus-black` | `outline-focus`        |
+| `divide-focus-black`  | `divide-focus`         |
+| `stroke-focus-black`  | `stroke-focus`         |
+| `border-focus-blue`   | `border-accent-focus`  |
+| `outline-focus-blue`  | `outline-accent-focus` |
+| `divide-focus-blue`   | `divide-accent-focus`  |
+| `stroke-focus-blue`   | `stroke-accent-focus`  |
+
+**Not affected:**
+
+- The CSS variables. `focus` still resolves `var(--stroke-focus-black, var(--stroke-focus, #161B2D))` and `accent-focus` still resolves `var(--stroke-focus-blue, #6785FB)`. A theme set up for 0.13.0 — or for 0.12.x, which used `--stroke-focus` — needs no change.
+- Tailwind's `focus:` and `focus-visible:` **variants**, which have nothing to do with the token. `focus-visible:outline-focus-black` becomes `focus-visible:outline-focus`; the `focus-visible:` prefix is untouched.
+- `controls-focus` / `--controls-stroke-focus` — a separate legacy token.
+
+## Step-by-step migration
+
+### If you are coming from 0.12.x
+
+Nothing to do for `focus` — the name you have is the name that ships. Only `focus-blue` → `accent-focus` applies.
+
+### If you are coming from 0.13.0
+
+#### 1. Find all usages
+
+```bash
+grep -rEn "(border|outline|divide|stroke)-focus-(black|blue)" src/
+```
+
+#### 2. Rename the utilities
+
+**Before:**
+
+```tsx
+<button className="focus-visible:outline focus-visible:outline-focus-black" />
+<div className="focus-within:border-focus-blue" />
+```
+
+**After:**
+
+```tsx
+<button className="focus-visible:outline focus-visible:outline-focus" />
+<div className="focus-within:border-accent-focus" />
+```
+
+In SCSS:
+
+```scss
+.my-control:focus-visible {
+  @apply outline outline-offset-2 outline-focus;
+}
+```
+
+#### 3. Verify
+
+```bash
+npm run build:css   # a stale @apply is a hard error here
+npm run typecheck && npm run test
+```
+
+Then confirm the ring is actually painted, not just present:
+
+```bash
+grep -c "outline-focus" dist/index.css
+```
+
+## Notes
+
+- `ringColor` is not wired to this token scale, so `ring-focus` does not resolve — it did not in 0.12.x or 0.13.0 either. Use `outline-focus` for focus rings; the `outline` utility already emits a 1px solid ring.
+- A stale `outline-focus-black` in JSX is silent: Tailwind emits nothing, the outline falls back to `currentColor`, and the ring looks _almost_ right. Run the grep.

package/dist/migration-guides/0.14.0/select-multiselect-option-row.md

@@ -0,0 +1,99 @@
+# Migrating the multi-select `Select` option row — v0.13.x → v0.14.0
+
+## Why this changed
+
+A multi-select option used to be a `role="option"` wrapper with a real
+`<input type="checkbox">` inside it. That gave one choice two controls and two
+states: the option announced `aria-selected` while the checkbox announced
+`aria-checked`, and a screen reader had no way to tell which of the two it had
+landed on. It also left most of the row inert — only the 20px box and the label
+text selected the option, while the rest of the 40px rectangle did nothing, and
+the overlay's arrow keys could not reach the row at all because the wrapper was
+not focusable.
+
+The row is now a single control, as the design has it and as the WAI-ARIA
+listbox pattern prescribes: one `option` carrying `aria-selected`, with the
+checkbox drawn as a decorative box. The whole row selects, Enter and Space
+toggle it, and the arrow keys walk it like they already walked single-select
+options.
+
+Nothing in `SelectProps` changed. This only affects code — mostly tests — that
+reached for the checkbox inside an option.
+
+## What changed
+
+| Before                                             | After                                         |
+| -------------------------------------------------- | --------------------------------------------- |
+| `role="option"` wrapper + nested `role="checkbox"` | one `role="option"` element                   |
+| state on the checkbox's `aria-checked`             | state on the option's `aria-selected`         |
+| clickable: the box and the label text              | clickable: the whole row                      |
+| `<div>` wrapper, not focusable                     | `<button role="option">`, arrow-key reachable |
+| Select All: `role="checkbox"`                      | Select All: `role="checkbox"` (**unchanged**) |
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+# Tests and helpers that address a multi-select option through its checkbox
+grep -rn "getByRole('checkbox'\|getAllByRole('checkbox'\|role=\"checkbox\"" src/
+```
+
+Only the hits that target an **option of a multiple `Select`** need changing.
+The Select All row above the list is still a real checkbox, as are `Checkbox`
+and every other checkbox in your app.
+
+### 2. Query the option instead of its checkbox
+
+**Before:**
+
+```tsx
+fireEvent.click(screen.getByRole('checkbox', { name: 'Option 1' }));
+expect(screen.getByRole('checkbox', { name: 'Option 1' })).toBeChecked();
+```
+
+**After:**
+
+```tsx
+fireEvent.click(screen.getByRole('option', { name: 'Option 1' }));
+expect(screen.getByRole('option', { name: 'Option 1' })).toHaveAttribute(
+  'aria-selected',
+  'true',
+);
+```
+
+`toBeChecked()` works on elements with `aria-checked` or a checkbox role, so it
+does not apply to an `option`. Assert `aria-selected` instead.
+
+### 3. Drop workarounds for the inert row
+
+If you clicked the label text to work around the row not being clickable, or
+focused the inner input to drive the keyboard, target the option directly:
+
+**Before:**
+
+```tsx
+await user.click(screen.getByText('Option 1'));
+```
+
+**After:**
+
+```tsx
+await user.click(screen.getByRole('option', { name: 'Option 1' }));
+```
+
+### 4. Verify
+
+```bash
+npm run typecheck && npm run test
+```
+
+## Notes
+
+- The option's accessible name now comes from its own content — the label, plus
+  the option's `description` when it has one. The decorative box is
+  `aria-hidden`, so it contributes nothing to the name.
+- Custom styling that targeted the nested checkbox (for instance
+  `[role="option"] input`) no longer matches anything. Style the row itself.
+- If you render your own multiselect-looking row and want the same box, import
+  `CheckboxBox` and leave `htmlFor` off — it renders the decorative variant.

package/dist/migration-guides/0.14.0/shadow-token-per-step-rename.md

@@ -0,0 +1,139 @@
+# Migrating the shadow scale — v0.13.0 → v0.14.0
+
+## Why this changed
+
+The shadow scale was themed through three variables named after the **colours** in it, not after the steps that used them:
+
+```js
+// 0.13.0
+DEFAULT: '0 0 4px 0 var(--shadow-default, rgba(0, 0, 0, 0.30))',
+xs: '0 1px 4px 0 var(--shadow-grey-1000, …), 0 1px 2px 0 var(--shadow-blue-500, …)',
+sm: '0 2px 12px 0 var(--shadow-grey-1000, …), 0 2px 6px 0 var(--shadow-blue-500, …)',
+md: '0 6px 24px 0 var(--shadow-grey-1000, …), 0 6px 16px 0 var(--shadow-blue-500, …)',
+lg: '0 10px 36px 0 var(--shadow-grey-1000, …), 0 10px 24px 0 var(--shadow-blue-500, …)',
+```
+
+One `--shadow-blue-500` carried the blue of all four steps, so a theme could not darken `lg` without darkening `xs` by the same amount — the ramp collapsed to a single value. `--shadow-grey-1000` had the same problem across the two steps that still use grey.
+
+The design has since split the scale per step: `sm`, `md` and `lg` are a **single** wide blue layer (the grey layer only muddies them at that size), and `xs` keeps two layers but with the blue as the wide one. Each step now reads its own variable, named after the step rather than the hue:
+
+- `--shadow-sm`, `--shadow-md`, `--shadow-lg` — the one layer each of those steps draws.
+- `--shadow-xs-1` / `--shadow-xs-2` — the two layers `shadow-xs` draws, outer first.
+
+`sm` also changed meaning. It used to be the resting shadow of a solid button; it is now the **side panel** shadow — `0 8px 10px` at blue-500 alpha-8, used by the side bar, the side panel and the right panel. The value it used to hold has not changed at all, but it no longer has a step in the design scale, so it is written out in `buttons.scss` as a class instead of taking a fifth `boxShadow` key:
+
+| Role                                                      | 0.13.0      | 0.14.0                    |
+| --------------------------------------------------------- | ----------- | ------------------------- |
+| Side bar / side panel / right panel                       | —           | `shadow-sm`               |
+| Resting shadow of a solid button, the FAB, a slider thumb | `shadow-sm` | `dial-kit-control-shadow` |
+
+## What changed
+
+### Variables
+
+| 0.13.0 variable      | 0.14.0 variable                                                 | Light default                   |
+| -------------------- | --------------------------------------------------------------- | ------------------------------- |
+| `--shadow-blue-500`  | `--shadow-xs-1` (xs and `dial-kit-control-shadow`)              | `#2764D933` (blue-500 alpha-20) |
+| `--shadow-blue-500`  | `--shadow-sm`                                                   | `#2764D914` (blue-500 alpha-8)  |
+| `--shadow-blue-500`  | `--shadow-md`                                                   | `#2764D90F` (blue-500 alpha-6)  |
+| `--shadow-blue-500`  | `--shadow-lg`                                                   | `#2764D914` (blue-500 alpha-8)  |
+| `--shadow-grey-1000` | `--shadow-xs-2` (the same two — no other step has a grey layer) | `#161B2D08` (grey-1000 alpha-3) |
+| `--shadow-default`   | _removed_ — `shadow` is no longer a DIAL shadow (see Notes)     | —                               |
+
+The 0.13.0 names are **not** kept in the fallback chain: one old variable cannot map onto five new ones without re-flattening the ramp it was split to fix.
+
+### Rendered shadows
+
+| Step                      | 0.13.0                                          | 0.14.0                                       |
+| ------------------------- | ----------------------------------------------- | -------------------------------------------- |
+| `shadow-xs`               | `0 1px 4px` grey, `0 1px 2px` blue alpha-14     | `0 1px 4px` blue alpha-20, `0 1px 2px` grey  |
+| `dial-kit-control-shadow` | _(new — held by `shadow-sm` in 0.13.0)_         | `0 2px 12px` blue alpha-20, `0 2px 6px` grey |
+| `shadow-sm`               | `0 2px 12px` grey, `0 2px 6px` blue alpha-14    | `0 8px 10px` blue alpha-8                    |
+| `shadow-md`               | `0 6px 24px` grey, `0 6px 16px` blue alpha-14   | `0 8px 24px` blue alpha-6                    |
+| `shadow-lg`               | `0 10px 36px` grey, `0 10px 24px` blue alpha-14 | `0 8px 44px` blue alpha-8                    |
+
+In `xs` the blue and grey layers have **swapped roles**: the blue is now the wide diffuse layer and the grey the tight one. `md` and `lg` sit lower and softer than before, so anything using them — `Card`, `Calendar`, `Input`, overlays, tooltips, the collapsible sidebar (`md`), `Notification` and card hover (`lg`) — reads differently. `dial-kit-control-shadow` renders exactly what `shadow-sm` rendered in 0.13.0, so a control that switches to it is unchanged.
+
+## Step-by-step migration
+
+### 1. Move the resting control shadow to `dial-kit-control-shadow`
+
+`shadow-sm` on a button, a FAB or any other resting control is now the panel shadow — a wider, lower, much fainter blue that reads as a floating surface rather than a raised control. Find them:
+
+```bash
+grep -rn "shadow-sm" src/
+```
+
+**Before:**
+
+```tsx
+<button className="rounded-full bg-control-neutral shadow-sm">New chat</button>
+```
+
+**After:**
+
+```tsx
+<button className="rounded-full bg-control-neutral dial-kit-control-shadow">
+  New chat
+</button>
+```
+
+Keep `shadow-sm` where the element is a side bar, side panel or right panel — that is what the step now means.
+
+`dial-kit-control-shadow` is a plain class in the kit's stylesheet, not a Tailwind utility, so it is **unlayered**: it beats any `shadow-*` utility on the same element regardless of order. Do not pair it with one — pick whichever of the two the element should draw.
+
+### 2. Find the variables in your theme
+
+```bash
+grep -rEn -- "--shadow-(default|blue-500|grey-1000)" src/ themes/
+```
+
+Also check any theme JSON served by the DIAL themes service.
+
+### 3. Rename them
+
+**Before:**
+
+```css
+:root {
+  --shadow-blue-500: #2764d924;
+  --shadow-grey-1000: #161b2d08;
+  --shadow-default: rgba(0, 0, 0, 0.3);
+}
+```
+
+**After:**
+
+```css
+:root {
+  --shadow-xs-1: #2764d933; /* wide blue layer of xs and the control shadow */
+  --shadow-xs-2: #161b2d08; /* tight grey layer of the same two */
+  --shadow-sm: #2764d914;
+  --shadow-md: #2764d90f;
+  --shadow-lg: #2764d914;
+}
+```
+
+Splitting one blue into four is the point of the change: pick a lighter value for `--shadow-sm`, `--shadow-md` and `--shadow-lg` than for `--shadow-xs-1`, since those steps have no second layer to sit on. Setting all four to your old `--shadow-blue-500` value compiles, but reproduces the flat ramp.
+
+### 4. Verify
+
+```bash
+npm run build:css
+npm run typecheck && npm run test
+```
+
+Then confirm the variables reached the compiled shadows:
+
+```bash
+grep -o -- "--tw-shadow:0 [^;]*" dist/index.css | sort -u
+```
+
+Every DIAL step should reference a `--shadow-xs-*` / `--shadow-sm` / `--shadow-md` / `--shadow-lg` variable.
+
+## Notes
+
+- **`shadow` (the `DEFAULT`) is no longer a DIAL shadow.** `boxShadow` is declared under `theme.extend`, so removing the `DEFAULT` entry does not remove the class — it falls back to Tailwind's own `shadow` (`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`), which is a neutral black shadow and ignores `--shadow-default`. Replace a bare `shadow` with the step you mean — `dial-kit-control-shadow` for a control, `shadow-md` for a raised surface.
+- **A `shadow-sm` left on a button still compiles.** Nothing typechecks a Tailwind class, so the only signal is the rendering: the control loses its tight halo and picks up a faint wide one. Run the grep in step 1 rather than waiting for an error.
+- A stale `--shadow-blue-500` in a theme is silent: nothing reads it, and every shadow quietly renders at its light default. Run the grep rather than trusting the page to look wrong.
+- These names match `tailwind.config.js` in `ai-dial-chat`, so a variable set for the chat app resolves the same way in the kit.

package/dist/migration-guides/0.14.0/tag-single-size.md

@@ -0,0 +1,121 @@
+# Migrating `Tag` — one size, no rim — v`0.13.x` → v`0.14.0`
+
+## Why this changed
+
+The 2.0 tag is one shape: a 32px pill. The old `size` prop offered two heights
+(24px standard, 20px small) that the design system no longer draws, and a tag is
+not a control a caller sizes — it labels content, so it takes the size the
+design gives it. Dropping the prop also removes the branch that had to keep two
+geometries, two pointer-target rules and two radii in step.
+
+The rim went with it. No tag draws a border any more: the outlined chip is told
+apart by its fill on the raised layer, and the accent tint carries hover and
+selection. A 1px rim on a 32px pill was doing no work the fill was not already
+doing, and it was the last thing keeping a border box on the borderless
+selectable chip.
+
+Alongside it, the selectable chip picks up the rest of its spec: a semibold
+label once selected, and hover carried by the accent tint alone instead of also
+darkening the label.
+
+## What changed
+
+| Before                                             | After                                               |
+| -------------------------------------------------- | --------------------------------------------------- |
+| `<Tag size={ElementSize.Standard} />`              | `<Tag />`                                           |
+| `<Tag size={ElementSize.Small} />`                 | `<Tag />` — there is no 20px tag                    |
+| `TagProps['size']`                                 | removed from the type                               |
+| 24px tall, `rounded-lg`, 8px side padding          | 32px tall, `rounded-full`, 12px side padding        |
+| 1px rim (`border-tertiary`, `border-accent-alpha`) | no border on any tag                                |
+| Outlined hover: rim → `border-accent-alpha`        | Hover: `bg-control-accent-alpha-hover` on every tag |
+| Selected selectable chip: regular label            | Selected selectable chip: semibold label            |
+| Selectable chip hover: label → `text-primary`      | Label colour unchanged on hover                     |
+| `disabled` dimmed the tag and sank its fill        | `disabled` only stops it responding                 |
+| `transition-colors duration-200`                   | no transition — the design switches the fill at 0ms |
+| `TagInput size="sm"` rendered 20px tags            | Renders the one 32px tag; the field grows to fit    |
+
+`Tag` is the only component with a changed public API. `TagInput`, `Select` and
+`MultiSelectTags` compose it and need no changes at the call site, but their
+tags are visibly taller.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+# Tags that pass a size
+grep -rn "<Tag" -A 6 src/ | grep -n "size="
+
+# Layouts that assumed the old 24px/20px tag height
+grep -rn "h-\[24px\]\|h-\[20px\]" src/
+```
+
+### 2. Drop the prop
+
+**Before:**
+
+```tsx
+<Tag label="TypeScript" size={ElementSize.Small} />
+<Tag label="Drafts" size={ElementSize.Standard} selected onClick={toggle} />
+```
+
+**After:**
+
+```tsx
+<Tag label="TypeScript" />
+<Tag label="Drafts" selected onClick={toggle} />
+```
+
+### 3. Re-check the containers around your tags
+
+A tag is 8px taller than the 0.13.x standard one and 12px taller than the small
+one, so any row with a fixed height needs another look:
+
+```tsx
+// Before: a row sized to the old tag
+<div className="flex h-[24px] items-center gap-1">{tags}</div>
+
+// After: let the row take the tag's height
+<div className="flex items-center gap-1">{tags}</div>
+```
+
+The same applies to a small `TagInput`: its field is `min-h-[24px]` over
+`h-auto`, so it grows around the tags rather than clipping them — but a wrapper
+you gave a fixed height will clip.
+
+### 4. Update tests that asserted the old geometry
+
+```diff
+-expect(tag).toHaveClass('h-[20px]');
++expect(tag).toHaveClass('h-[32px]');
+```
+
+### 5. Verify
+
+```bash
+npm run typecheck && npm run test
+```
+
+`typecheck` finds every remaining `size` on a `Tag` for you — the prop is gone
+from `TagProps`, so each one is a type error rather than a silent no-op.
+
+## Notes
+
+- A disabled tag is no longer dimmed — the design defines no disabled tag, so
+  `disabled` keeps the colours and only removes the click handling, the remove
+  control and the pointer. If your UI relies on a disabled tag being visibly
+  inert, say so with the surrounding copy or pass your own `className`.
+- `TagAppearance.Outlined` keeps its name even though it no longer outlines
+  anything — renaming it would be a second breaking change in the same release.
+  Read it as "the default filled chip".
+- The selected selectable chip is set in `dial-tiny-semi-text`, so selecting one
+  changes its width by the difference between the regular and semibold label. In
+  a wrapping filter row that is the intended behaviour; give the chip a width if
+  a stable layout matters more.
+- `dial-kit-minimum-target` is gone from the tag itself. At 32px the rendered
+  size clears the WCAG 2.5.8 minimum of 24×24 on its own, so the pseudo-element
+  is no longer needed — and with it goes the target that used to sit over a
+  nested remove button. The remove button keeps its own.
+- The class matrix now lives in `src/components/New/Tag/constants.ts`
+  (`tagBaseClassName`, `tagStateClassNames`, `tagHoverClassName`). These are
+  internal — they are not exported from the package.

package/dist/migration-guides/README.md

@@ -22,6 +22,12 @@ migration-guides/
 | 0.13.0 | [caption-semi-text-lead-rename](0.13.0/caption-semi-text-lead-rename.md) | `dial-caption-semi-text` renamed to `dial-caption-lead-semi-text` and now uppercases |
 | 0.13.0 | [progress-bar-2-0-rewrite](0.13.0/progress-bar-2-0-rewrite.md) | `DialProgressBar` rebuilt on 2.0 tokens as `ProgressBar`; `DialProgressBarSize` → `ElementSize`, `ariaLabel` → `aria-label` |
 | 0.13.0 | [field-label-props-unification](0.13.0/field-label-props-unification.md) | `Calendar`, `Switch` and `ProgressBar` take `labelProps` instead of `label`, so every 2.0 field names itself through `Label` |
+| 0.14.0 | [control-color-token-rename](0.14.0/control-color-token-rename.md) | Control tokens renamed by role: `control-disable-alpha`/`-beta` → `-primary`/`-secondary`, `text-control-blue-*` → `text-control-accent-*`, `bg-control-disable` → `bg-control-disable-primary`, `bg-control-neutral-hover` → `-hover-muted` |
+| 0.14.0 | [focus-border-token-role-naming](0.14.0/focus-border-token-role-naming.md) | Border tokens `focus-black` → `focus` and `focus-blue` → `accent-focus`, reversing the 0.13.0 value-based naming |
+| 0.14.0 | [select-multiselect-option-row](0.14.0/select-multiselect-option-row.md) | A multi-select `Select` option is one `option` with `aria-selected` and a decorative box, instead of an option wrapping a real `role="checkbox"` |
+| 0.14.0 | [button-tooltip-2-0](0.14.0/button-tooltip-2-0.md) | `Button` and `IconButton` wrap the 2.0 `Tooltip` with `asChild`: `placement` takes `TooltipPlacement`, and the trigger `<span>` is gone |
+| 0.14.0 | [tag-single-size](0.14.0/tag-single-size.md) | `Tag` drops `size` for one 32px pill; the selectable chip gets a semibold selected label |
+| 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` |
 
 ---
 

package/dist/src/components/FileManager/hooks/use-file-upload.d.ts

@@ -1,4 +1,4 @@
-import { DragEvent } from 'react';
+import { ChangeEvent, DragEvent } from 'react';
 import { DialFile } from '../../../models/file';
 import { DialFileAcceptType, DialUploadFileItem } from '../../../models/file-manager';
 import { FileConflictDecision } from '../components/ConflictResolutionPopup/ConflictResolutionPopup';
@@ -50,6 +50,8 @@ export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileS
     openFileDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
     openArchiveDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
     fileInputRef: import('react').RefObject<HTMLInputElement | null>;
+    fileInputAccept: string | undefined;
+    handleFileInputChange: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
     uploadConflictingFiles: DialFile[];
     uploadConflictResolutionOpen: boolean;
     hasActiveUploadConflictRef: import('react').RefObject<boolean>;

package/dist/src/components/Grid/comparators/base-column-comparator.d.ts

@@ -1,4 +1 @@
-import { ColDef, IRowNode } from 'ag-grid-community';
-export declare const baseColumnComparator: (a: string | number | undefined, b: string | number | undefined, _nodeA?: IRowNode, _nodeB?: IRowNode, isInverted?: boolean) => number;
-export declare const omitUndefined: <T extends object>(value: T | undefined) => T;
-export declare const checkColDefsChanges: (cols: ColDef[], initialCols: ColDef[]) => boolean;
+export { baseColumnComparator, checkColDefsChanges, omitUndefined, } from '../../../utils/grid-comparators';

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

@@ -1,2 +1 @@
-import { DateValue } from './DateCellRenderer';
-export declare function convertToDate(input?: DateValue | null): Date | null;
+export { convertToDate } from '../../../utils/grid-date';

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

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
 import { ElementSize } from '../../../types/size';
-type TooltipProps = Omit<DialTooltipProps, 'children'>;
+import { TooltipProps } from '../Tooltip/Tooltip';
+type ButtonTooltipProps = Omit<TooltipProps, 'children'>;
 export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ElementSize;
@@ -11,7 +11,7 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
     label?: ReactNode;
     iconBefore?: ReactNode;
     iconAfter?: ReactNode;
-    tooltipProps?: TooltipProps;
+    tooltipProps?: ButtonTooltipProps;
     href?: string;
     target?: HTMLAttributeAnchorTarget;
     rel?: string;
@@ -58,6 +58,7 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
  * `<button>`, so the control keeps the link role, middle-click, and
  * "open in new tab". Pair it with `ButtonAppearance.Link` (or `LinkButton`)
  * unless a button-shaped link is intended.
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
  * @param [target] - Anchor target, only meaningful alongside `href`
  * @param [rel] - Anchor `rel`. Defaults to `noopener noreferrer` when
  * `target="_blank"`.

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

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

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

@@ -0,0 +1,50 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
+export interface CheckboxProps extends NativeInputProps {
+    labelProps?: LabelProps;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    caption?: string;
+    boxClassName?: string;
+}
+/**
+ * A checkbox from the 2.0 design system.
+ * aliases: ToggleCheckbox|MultiSelectOption|TriStateCheckbox
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   labelProps={{ label: 'Accept terms' }}
+ *   isSelected={accepted}
+ *   onChange={setAccepted}
+ * />
+ * ```
+ *
+ * `isIndeterminate` takes visual precedence over `isSelected` and announces the
+ * control as `mixed` — use it for a parent whose children are partly selected.
+ * It also sets the native `indeterminate` DOM property, which no React prop
+ * covers. Clicking an indeterminate checkbox selects it, as it does natively.
+ *
+ * The box and the label text are two sibling `<label for>` elements rather than
+ * one wrapper, so the {@link Label} keeps its own `required` marker and
+ * `caption` info button — a button nested in a label forwards its clicks to the
+ * labelled control. Clicking either one still toggles the checkbox.
+ *
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
+ * @param [isSelected=false] - The current value of the checkbox
+ * @param [isIndeterminate=false] - Whether the checkbox is in the mixed state
+ * @param [invalid=false] - Whether the checkbox failed validation (applies error styling)
+ * @param [disabled=false] - Whether the checkbox is disabled
+ * @param [onChange] - Callback fired with the new value when toggled
+ * @param [caption] - Caption text rendered below the label, and described by the checkbox
+ * @param [boxClassName] - Additional classes for the box itself. Use it to drop
+ * the box's own focus ring where the container already draws one, as a
+ * multiselect row does.
+ */
+export declare const Checkbox: FC<CheckboxProps>;
+export {};

package/dist/src/components/New/Checkbox/CheckboxBox.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+export interface CheckboxBoxProps {
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    htmlFor?: string;
+    className?: string;
+}
+/**
+ * The 20px box a checkbox draws — the square, its border, its fill and the
+ * check or dash inside.
+ * Design system 2.0
+ *
+ * Two things render it: {@link Checkbox}, where it is the `<label for>` that
+ * toggles the input next to it, and rows that only *look* like a checkbox —
+ * a `menuitemcheckbox` in a dropdown, whose state lives on `aria-checked` and
+ * whose whole row is the control. Passing `htmlFor` picks the first: the box
+ * becomes a label with a pointer target of its own. Without it the box is a
+ * decorative `<span>`, hidden from assistive technology, and the row around it
+ * carries both the state and the pointer target.
+ *
+ * @param [isSelected=false] - Whether the box is filled with a check
+ * @param [isIndeterminate=false] - Whether the box is filled with a dash; takes precedence over `isSelected`
+ * @param [invalid=false] - Paints the box with the error colour
+ * @param [disabled=false] - Greys the box out
+ * @param [htmlFor] - Id of the input this box labels; omit for a decorative box
+ * @param [className] - Additional classes for the box
+ */
+export declare const CheckboxBox: FC<CheckboxBoxProps>;

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

@@ -0,0 +1,10 @@
+/**
+ * The check and minus glyphs are decorative: the input's `checked` and
+ * `aria-checked` already carry the state, so the icon is hidden from assistive
+ * tech. Tabler renders a bare `<svg>` with no role, so `aria-hidden` is explicit.
+ */
+export declare const CHECKBOX_ICON_PROPS: {
+    readonly size: 14;
+    readonly stroke: 3;
+    readonly 'aria-hidden': true;
+};