@epam/ai-dial-ui-kit 0.15.0-dev.47 → 0.15.0-dev.48

package/dist/CHANGELOG.md

@@ -67,6 +67,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`StarterButton` (2.0) — a sparkles icon by default** — the design puts a sparkles glyph before every starter label, so each host was passing the same `iconBefore`. `iconBefore` now defaults to a 20px `IconSparkles` at the 1.5 stroke, `aria-hidden`, and stroked with the starter gradient like any other icon. A caller-supplied `iconBefore` replaces it; `iconBefore={null}` keeps a label-only pill. A `StarterButton` that passed no `iconBefore` now draws the icon; no other API changes.
+
 - **`Select` (2.0) — multi-select tags are 24px, and the field wraps them with an 8px gap** — the tags in a multi-select field used the 32px pill of `Tag`, taller than the design's field chip. They are now 24px with a `rounded-md` shape, a `layer-sunken` fill and a `stroke-secondary` rim, and the wrapped field pads 8px vertically with 8px between tags, so one row of tags still fills the 40px field. `Tag` itself is unchanged. Visual only; no API changes.
 
 ### Fixed

package/dist/components/New/Button/ButtonWrappers.js

@@ -1,30 +1,33 @@
-import { jsx as r, jsxs as B, Fragment as f } from "react/jsx-runtime";
-import { useId as h } from "react";
-import { ButtonAppearance as n, ButtonVariant as o } from "../../../types/button.js";
+import { jsx as t, jsxs as B, Fragment as g } from "react/jsx-runtime";
+import { IconSparkles as y } from "@tabler/icons-react";
+import { useId as S } from "react";
+import { DIAL_KIT_ICON_STROKE as h } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
+import { ButtonAppearance as o, ButtonVariant as n } from "../../../types/button.js";
 import { Button as d } from "./Button.js";
-const l = (a, t) => ({ appearance: s, ...u }) => /* @__PURE__ */ r(
+const p = (a, r) => ({ appearance: s, ...u }) => /* @__PURE__ */ t(
   d,
   {
     ...u,
     variant: a,
-    appearance: s || t
+    appearance: s || r
   }
-), p = (a, t) => ({ variant: s, ...u }) => /* @__PURE__ */ r(
+), c = (a, r) => ({ variant: s, ...u }) => /* @__PURE__ */ t(
   d,
   {
     ...u,
-    variant: s || t,
+    variant: s || r,
     appearance: a
   }
-), N = l(
-  o.Primary,
-  n.Solid
-), C = l(
-  o.Neutral,
-  n.Solid
-), G = l(
-  o.Danger,
-  n.Solid
+), A = p(
+  n.Primary,
+  o.Solid
+), E = p(
+  n.Neutral,
+  o.Solid
+), R = p(
+  n.Danger,
+  o.Solid
 ), e = {
   x1: "-5.06",
   y1: "2.26",
@@ -32,69 +35,76 @@ const l = (a, t) => ({ appearance: s, ...u }) => /* @__PURE__ */ r(
   y2: "22.63",
   from: "var(--stroke-gradient-1, #5976E9)",
   to: "var(--stroke-gradient-2, #885DF2)"
-}, O = ({
-  appearance: a = n.Outlined,
-  iconBefore: t,
+}, x = /* @__PURE__ */ t(
+  y,
+  {
+    size: k.MD,
+    stroke: h,
+    "aria-hidden": !0
+  }
+), G = ({
+  appearance: a = o.Outlined,
+  iconBefore: r = x,
   iconAfter: i,
   style: s,
   ...u
 }) => {
-  const c = `dial-kit-starter-gradient-${h().replace(/[^\w-]/g, "")}`, g = /* @__PURE__ */ r(
+  const l = `dial-kit-starter-gradient-${S().replace(/[^\w-]/g, "")}`, f = /* @__PURE__ */ t(
     "svg",
     {
       className: "pointer-events-none absolute size-0 overflow-hidden",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ B(
+      children: /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ B(
         "linearGradient",
         {
-          id: c,
+          id: l,
           x1: e.x1,
           y1: e.y1,
           x2: e.x2,
           y2: e.y2,
           gradientUnits: "userSpaceOnUse",
           children: [
-            /* @__PURE__ */ r("stop", { stopColor: e.from }),
-            /* @__PURE__ */ r("stop", { offset: "1", stopColor: e.to })
+            /* @__PURE__ */ t("stop", { stopColor: e.from }),
+            /* @__PURE__ */ t("stop", { offset: "1", stopColor: e.to })
           ]
         }
       ) })
     }
-  ), m = (y) => /* @__PURE__ */ B(f, { children: [
-    g,
-    y
+  ), m = (I) => /* @__PURE__ */ B(g, { children: [
+    f,
+    I
   ] });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     d,
     {
       ...u,
-      variant: o.Starter,
+      variant: n.Starter,
       appearance: a,
-      iconBefore: t ? m(t) : void 0,
-      iconAfter: i && !t ? m(i) : i,
+      iconBefore: r ? m(r) : void 0,
+      iconAfter: i && !r ? m(i) : i,
       style: {
-        "--dial-kit-starter-icon-stroke": `url(#${c})`,
+        "--dial-kit-starter-icon-stroke": `url(#${l})`,
         ...s
       }
     }
   );
-}, D = p(
-  n.Link,
-  o.Primary
-), I = p(
-  n.Ghost,
-  o.Primary
-), P = p(
-  n.Outlined,
-  o.Neutral
+}, L = c(
+  o.Link,
+  n.Primary
+), P = c(
+  o.Ghost,
+  n.Primary
+), W = c(
+  o.Outlined,
+  n.Neutral
 );
 export {
-  G as DangerButton,
-  I as GhostButton,
-  D as LinkButton,
-  C as NeutralButton,
-  P as OutlinedButton,
-  N as PrimaryButton,
-  O as StarterButton
+  R as DangerButton,
+  P as GhostButton,
+  L as LinkButton,
+  E as NeutralButton,
+  W as OutlinedButton,
+  A as PrimaryButton,
+  G as StarterButton
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.47",
-  "generatedAt": "2026-10-07T20:31:41.572Z",
+  "version": "0.15.0-dev.48",
+  "generatedAt": "2026-10-07T21:46:14.687Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -709,10 +709,10 @@
       "name": "StarterButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Starter Button component — a conversation starter: an outlined neutral\npill whose icons are stroked with the accent gradient\nDesign system 2.0\n\nAn SVG stroke cannot take a CSS gradient, so the button renders its own\n`linearGradient` with a per-instance id and hands it to its icons through\nthe `--dial-kit-starter-icon-stroke` custom property. Any icon that strokes\nwith `currentColor`, as Tabler icons do, picks it up.",
+      "description": "A Starter Button component — a conversation starter: an outlined neutral\npill whose icons are stroked with the accent gradient\nDesign system 2.0\n\n`iconBefore` defaults to a sparkles icon; pass `null` for a label-only pill.\n\nAn SVG stroke cannot take a CSS gradient, so the button renders its own\n`linearGradient` with a per-instance id and hands it to its icons through\nthe `--dial-kit-starter-icon-stroke` custom property. Any icon that strokes\nwith `currentColor`, as Tabler icons do, picks it up.",
       "props": [],
       "examples": [
-        "<StarterButton\n label=\"Summarize this document\"\n iconBefore={<IconSparkles />}\n onClick={handleClick}\n/>"
+        "<StarterButton\n label=\"Summarize this document\"\n onClick={handleClick}\n/>"
       ],
       "sourceFile": "components/New/Button/ButtonWrappers.tsx"
     },