@epam/ai-dial-ui-kit 0.14.0-dev.5 → 0.14.0-dev.50

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

@@ -26,6 +26,8 @@ migration-guides/
 | 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/models/file.js

@@ -0,0 +1,6 @@
+var O = /* @__PURE__ */ ((E) => (E.ITEM = "item", E.FOLDER = "folder", E))(O || {}), I = /* @__PURE__ */ ((E) => (E.FILE = "FILE", E.PROMPT = "PROMPT", E.CONVERSATION = "CONVERSATION", E.APPLICATION = "APPLICATION", E.TOOLSET = "TOOL_SET", E))(I || {}), A = /* @__PURE__ */ ((E) => (E.READ = "READ", E.WRITE = "WRITE", E.SHARE = "SHARE", E))(A || {});
+export {
+  O as DialFileNodeType,
+  A as DialFilePermission,
+  I as DialFileResourceType
+};

package/dist/models/selection-mode.js

@@ -0,0 +1,4 @@
+var E = /* @__PURE__ */ ((L) => (L.MULTIPLE = "MULTIPLE", L.SINGLE = "SINGLE", L))(E || {});
+export {
+  E as GridSelectionMode
+};

package/dist/models/step.js

@@ -0,0 +1,4 @@
+var R = /* @__PURE__ */ ((r) => (r.VALID = "valid", r.ERROR = "error", r))(R || {});
+export {
+  R as StepStatus
+};

package/dist/node_modules/@react-dnd/asap/dist/AsapQueue.js

@@ -0,0 +1,39 @@
+import { makeRequestCall as h, makeRequestCallFromTimer as r } from "./makeRequestCall.js";
+class l {
+  // Use the fastest means possible to execute a task in its own turn, with
+  // priority over other events including IO, animation, reflow, and redraw
+  // events in browsers.
+  //
+  // An exception thrown by a task will permanently interrupt the processing of
+  // subsequent tasks. The higher level `asap` function ensures that if an
+  // exception is thrown by a task, that the task queue will continue flushing as
+  // soon as possible, but if you use `rawAsap` directly, you are responsible to
+  // either ensure that no exceptions are thrown from your task, or to manually
+  // call `rawAsap.requestFlush` if an exception is thrown.
+  enqueueTask(e) {
+    const { queue: t, requestFlush: s } = this;
+    t.length || (s(), this.flushing = !0), t[t.length] = e;
+  }
+  constructor() {
+    this.queue = [], this.pendingErrors = [], this.flushing = !1, this.index = 0, this.capacity = 1024, this.flush = () => {
+      const { queue: e } = this;
+      for (; this.index < e.length; ) {
+        const t = this.index;
+        if (this.index++, e[t].call(), this.index > this.capacity) {
+          for (let s = 0, i = e.length - this.index; s < i; s++)
+            e[s] = e[s + this.index];
+          e.length -= this.index, this.index = 0;
+        }
+      }
+      e.length = 0, this.index = 0, this.flushing = !1;
+    }, this.registerPendingError = (e) => {
+      this.pendingErrors.push(e), this.requestErrorThrow();
+    }, this.requestFlush = h(this.flush), this.requestErrorThrow = r(() => {
+      if (this.pendingErrors.length)
+        throw this.pendingErrors.shift();
+    });
+  }
+}
+export {
+  l as AsapQueue
+};

package/dist/node_modules/@react-dnd/asap/dist/RawTask.js

@@ -0,0 +1,17 @@
+class a {
+  call() {
+    try {
+      this.task && this.task();
+    } catch (s) {
+      this.onError(s);
+    } finally {
+      this.task = null, this.release(this);
+    }
+  }
+  constructor(s, t) {
+    this.onError = s, this.release = t, this.task = null;
+  }
+}
+export {
+  a as RawTask
+};

package/dist/node_modules/@react-dnd/asap/dist/TaskFactory.js

@@ -0,0 +1,16 @@
+import { RawTask as e } from "./RawTask.js";
+class c {
+  create(t) {
+    const s = this.freeTasks, r = s.length ? s.pop() : new e(
+      this.onError,
+      (o) => s[s.length] = o
+    );
+    return r.task = t, r;
+  }
+  constructor(t) {
+    this.onError = t, this.freeTasks = [];
+  }
+}
+export {
+  c as TaskFactory
+};

package/dist/node_modules/@react-dnd/asap/dist/asap.js

@@ -0,0 +1,9 @@
+import { AsapQueue as a } from "./AsapQueue.js";
+import { TaskFactory as o } from "./TaskFactory.js";
+const e = new a(), t = new o(e.registerPendingError);
+function u(r) {
+  e.enqueueTask(t.create(r));
+}
+export {
+  u as asap
+};

package/dist/node_modules/@react-dnd/asap/dist/makeRequestCall.js

@@ -0,0 +1,62 @@
+const a = typeof global < "u" ? global : self, l = a.MutationObserver || a.WebKitMutationObserver;
+function s(n) {
+  return function() {
+    const o = setTimeout(r, 0), t = setInterval(r, 50);
+    function r() {
+      clearTimeout(o), clearInterval(t), n();
+    }
+  };
+}
+function u(n) {
+  let e = 1;
+  const o = new l(n), t = document.createTextNode("");
+  return o.observe(t, {
+    characterData: !0
+  }), function() {
+    e = -e, t.data = e;
+  };
+}
+const c = typeof l == "function" ? (
+  // reliably everywhere they are implemented.
+  // They are implemented in all modern browsers.
+  //
+  // - Android 4-4.3
+  // - Chrome 26-34
+  // - Firefox 14-29
+  // - Internet Explorer 11
+  // - iPad Safari 6-7.1
+  // - iPhone Safari 7-7.1
+  // - Safari 6-7
+  u
+) : (
+  // task queue, are implemented in Internet Explorer 10, Safari 5.0-1, and Opera
+  // 11-12, and in web workers in many engines.
+  // Although message channels yield to any queued rendering and IO tasks, they
+  // would be better than imposing the 4ms delay of timers.
+  // However, they do not work reliably in Internet Explorer or Safari.
+  // Internet Explorer 10 is the only browser that has setImmediate but does
+  // not have MutationObservers.
+  // Although setImmediate yields to the browser's renderer, it would be
+  // preferrable to falling back to setTimeout since it does not have
+  // the minimum 4ms penalty.
+  // Unfortunately there appears to be a bug in Internet Explorer 10 Mobile (and
+  // Desktop to a lesser extent) that renders both setImmediate and
+  // MessageChannel useless for the purposes of ASAP.
+  // https://github.com/kriskowal/q/issues/396
+  // Timers are implemented universally.
+  // We fall back to timers in workers in most engines, and in foreground
+  // contexts in the following browsers.
+  // However, note that even this simple case requires nuances to operate in a
+  // broad spectrum of browsers.
+  //
+  // - Firefox 3-13
+  // - Internet Explorer 6-9
+  // - iPad Safari 4.3
+  // - Lynx 2.8.7
+  s
+);
+export {
+  c as makeRequestCall,
+  u as makeRequestCallFromMutationObserver,
+  s as makeRequestCallFromTimer
+};

package/dist/node_modules/@react-dnd/invariant/dist/index.js

@@ -0,0 +1,22 @@
+function a(r, n, ...i) {
+  if (t() && n === void 0)
+    throw new Error("invariant requires an error message argument");
+  if (!r) {
+    let e;
+    if (n === void 0)
+      e = new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");
+    else {
+      let o = 0;
+      e = new Error(n.replace(/%s/g, function() {
+        return i[o++];
+      })), e.name = "Invariant Violation";
+    }
+    throw e.framesToPop = 1, e;
+  }
+}
+function t() {
+  return typeof process < "u" && process.env.NODE_ENV === "production";
+}
+export {
+  a as invariant
+};

package/dist/node_modules/@react-dnd/shallowequal/dist/index.js

@@ -0,0 +1,25 @@
+function p(t, e, u, i) {
+  let r;
+  if (r !== void 0)
+    return !!r;
+  if (t === e)
+    return !0;
+  if (typeof t != "object" || !t || typeof e != "object" || !e)
+    return !1;
+  const n = Object.keys(t), l = Object.keys(e);
+  if (n.length !== l.length)
+    return !1;
+  const c = Object.prototype.hasOwnProperty.bind(e);
+  for (let s = 0; s < n.length; s++) {
+    const o = n[s];
+    if (!c(o))
+      return !1;
+    const f = t[o], a = e[o];
+    if (r = void 0, r === !1 || r === void 0 && f !== a)
+      return !1;
+  }
+  return !0;
+}
+export {
+  p as shallowEqual
+};