@epam/ai-dial-ui-kit 0.15.0-dev.51 → 0.15.0-dev.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +8 -0
- package/dist/{DateCellRenderer-CmgeZvYm.cjs → DateCellRenderer-BdUMSg-E.cjs} +1 -1
- package/dist/JsonEditor-eAV7SaKu.cjs +1 -0
- package/dist/{MarkdownEditor-BKtFs714.cjs → MarkdownEditor-Cp-KX6-T.cjs} +1 -1
- package/dist/{MarkdownEditor-Bapd1ycU.cjs → MarkdownEditor-Dav_pp0T.cjs} +1 -1
- package/dist/MarkdownEditorContainer-96cKYmYd.cjs +1 -0
- package/dist/components/MarkdownEditor/MarkdownEditorContainer.js +18 -16
- package/dist/components/New/AutocompleteTagInput/AutocompleteTagInput.js +144 -137
- package/dist/components/New/Grid/constants.js +14 -5
- package/dist/components/New/Slider/Slider.js +115 -86
- package/dist/components/New/Slider/utils.js +14 -6
- package/dist/components-manifest.json +26 -6
- package/dist/dial-ui-kit.cjs +2 -2
- package/dist/editor-BH6_A1k2.cjs +1 -0
- package/dist/editors.cjs +1 -1
- package/dist/grid.cjs +1 -1
- package/dist/index.css +2 -2
- package/dist/lazy-DMVYJhUR.cjs +1 -0
- package/dist/src/components/New/AutocompleteTagInput/AutocompleteTagInput.d.ts +11 -0
- package/dist/src/components/New/Grid/constants.d.ts +6 -4
- package/dist/src/components/New/Slider/Slider.d.ts +9 -0
- package/dist/src/components/New/Slider/utils.d.ts +11 -3
- package/package.json +1 -1
- package/dist/JsonEditor-Bxui5wJH.cjs +0 -1
- package/dist/MarkdownEditorContainer-B5aHwoYF.cjs +0 -1
- package/dist/lazy-_W6FYhKg.cjs +0 -1
|
@@ -1,54 +1,66 @@
|
|
|
1
|
-
import { jsxs as n, jsx as e, Fragment as
|
|
2
|
-
import { useId as
|
|
3
|
-
import {
|
|
1
|
+
import { jsxs as n, jsx as e, Fragment as j } from "react/jsx-runtime";
|
|
2
|
+
import { useId as Y, useState as P, useCallback as b } from "react";
|
|
3
|
+
import { ElementSize as ee } from "../../../types/size.js";
|
|
4
|
+
import { mergeClasses as s } from "../../../utils/merge-classes.js";
|
|
4
5
|
import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
|
|
5
|
-
import { ErrorText as
|
|
6
|
-
import { Label as
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
6
|
+
import { ErrorText as te, CaptionText as ne } from "../CaptionText/CaptionText.js";
|
|
7
|
+
import { Label as re } from "../Label/Label.js";
|
|
8
|
+
import { NumberInput as le } from "../NumberInput/NumberInput.js";
|
|
9
|
+
import { getTickPercents as ae, getStepPrecision as ie, snapToStep as se } from "./utils.js";
|
|
10
|
+
const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t) => r && t ? "grid-cols-[auto_minmax(0,1fr)_auto]" : r ? "grid-cols-[auto_minmax(0,1fr)]" : t ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", Ne = ({
|
|
11
|
+
id: r,
|
|
12
|
+
value: t,
|
|
13
|
+
min: o = 0,
|
|
14
|
+
max: m = 1,
|
|
15
|
+
step: c = 0.1,
|
|
16
|
+
disabled: l,
|
|
17
|
+
labelProps: d,
|
|
18
|
+
labels: a,
|
|
19
|
+
formatValue: p,
|
|
20
|
+
showValue: y = !1,
|
|
21
|
+
showTooltip: A = !1,
|
|
22
|
+
showTicks: G = !1,
|
|
23
|
+
leftContent: I,
|
|
24
|
+
rightContent: S,
|
|
25
|
+
showValueInput: w = !1,
|
|
26
|
+
valueInputAriaLabel: H,
|
|
27
|
+
caption: C,
|
|
28
|
+
error: u,
|
|
29
|
+
onChange: f,
|
|
30
|
+
containerClassName: U,
|
|
31
|
+
trackClassName: V,
|
|
32
|
+
fillClassName: Z,
|
|
33
|
+
className: q,
|
|
34
|
+
...T
|
|
31
35
|
}) => {
|
|
32
|
-
const
|
|
33
|
-
(
|
|
34
|
-
|
|
36
|
+
const J = Y(), h = r ?? J, F = C && !u ? `${h}-caption` : void 0, _ = u ? `${h}-error` : void 0, x = m - o, K = x > 0 ? Math.min(100, Math.max(0, (t - o) / x * 100)) : 0, z = L(K), O = G && !l ? ae(x, c) : [], B = A && !l, g = I != null, M = w || S != null, $ = ie(c), [Q, k] = P(null), v = p ? p(t) : t.toFixed($), R = b(
|
|
37
|
+
(i) => {
|
|
38
|
+
f?.(Number(i.target.value));
|
|
35
39
|
},
|
|
36
|
-
[
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
[f]
|
|
41
|
+
), W = b(
|
|
42
|
+
(i) => {
|
|
43
|
+
const N = i == null ? "" : String(i);
|
|
44
|
+
k(N);
|
|
45
|
+
const E = Number(N);
|
|
46
|
+
N !== "" && Number.isFinite(E) && f?.(se(E, o, m, c));
|
|
47
|
+
},
|
|
48
|
+
[m, o, f, c]
|
|
49
|
+
), X = b(() => k(null), []);
|
|
50
|
+
return /* @__PURE__ */ n("div", { className: s("flex flex-col gap-2", U), children: [
|
|
51
|
+
(d || y) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
|
|
52
|
+
d && /* @__PURE__ */ e(re, { ...d, htmlFor: h }),
|
|
53
|
+
y && // The input already reports its value to assistive tech, so this is
|
|
42
54
|
// a visual echo rather than a second announcement.
|
|
43
55
|
/* @__PURE__ */ e(
|
|
44
56
|
"span",
|
|
45
57
|
{
|
|
46
58
|
"aria-hidden": "true",
|
|
47
|
-
className:
|
|
59
|
+
className: s(
|
|
48
60
|
"dial-small-text ml-auto",
|
|
49
|
-
|
|
61
|
+
l ? "text-control-disable-primary" : "text-primary"
|
|
50
62
|
),
|
|
51
|
-
children:
|
|
63
|
+
children: v
|
|
52
64
|
}
|
|
53
65
|
)
|
|
54
66
|
] }),
|
|
@@ -56,55 +68,55 @@ const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `
|
|
|
56
68
|
/* @__PURE__ */ n(
|
|
57
69
|
"div",
|
|
58
70
|
{
|
|
59
|
-
className:
|
|
71
|
+
className: s(
|
|
60
72
|
"grid items-center gap-x-3 gap-y-1",
|
|
61
|
-
|
|
73
|
+
ce(g, M),
|
|
62
74
|
// Room for the value bubble, which hangs above the track row.
|
|
63
|
-
|
|
75
|
+
B && "mt-7"
|
|
64
76
|
),
|
|
65
77
|
children: [
|
|
66
|
-
|
|
78
|
+
g && /* @__PURE__ */ e("div", { className: "flex items-center", children: I }),
|
|
67
79
|
/* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
|
|
68
80
|
/* @__PURE__ */ e(
|
|
69
81
|
"div",
|
|
70
82
|
{
|
|
71
|
-
className:
|
|
83
|
+
className: s(
|
|
72
84
|
"pointer-events-none absolute inset-x-0 h-1 rounded-full",
|
|
73
|
-
|
|
74
|
-
|
|
85
|
+
l ? "bg-control-disable-primary" : "bg-control-accent-muted",
|
|
86
|
+
V
|
|
75
87
|
)
|
|
76
88
|
}
|
|
77
89
|
),
|
|
78
|
-
|
|
90
|
+
O.map((i) => /* @__PURE__ */ e(
|
|
79
91
|
"span",
|
|
80
92
|
{
|
|
81
93
|
"aria-hidden": "true",
|
|
82
|
-
className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full
|
|
83
|
-
style: { left:
|
|
94
|
+
className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full border border-accent-focus",
|
|
95
|
+
style: { left: L(i) }
|
|
84
96
|
},
|
|
85
|
-
|
|
97
|
+
i
|
|
86
98
|
)),
|
|
87
99
|
/* @__PURE__ */ e(
|
|
88
100
|
"div",
|
|
89
101
|
{
|
|
90
|
-
className:
|
|
102
|
+
className: s(
|
|
91
103
|
"pointer-events-none absolute left-0 h-1 rounded-full",
|
|
92
|
-
|
|
93
|
-
|
|
104
|
+
l ? "bg-control-disable-secondary" : "bg-control-accent",
|
|
105
|
+
Z
|
|
94
106
|
),
|
|
95
|
-
style: { width:
|
|
107
|
+
style: { width: z }
|
|
96
108
|
}
|
|
97
109
|
),
|
|
98
|
-
|
|
110
|
+
B && // A visual echo like `showValue`: the input already announces
|
|
99
111
|
// its value, so the bubble stays out of the accessibility tree.
|
|
100
112
|
/* @__PURE__ */ n(
|
|
101
113
|
"span",
|
|
102
114
|
{
|
|
103
115
|
"aria-hidden": "true",
|
|
104
116
|
className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
|
|
105
|
-
style: { left:
|
|
117
|
+
style: { left: z },
|
|
106
118
|
children: [
|
|
107
|
-
/* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children:
|
|
119
|
+
/* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: v }),
|
|
108
120
|
/* @__PURE__ */ e(
|
|
109
121
|
"svg",
|
|
110
122
|
{
|
|
@@ -121,53 +133,70 @@ const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `
|
|
|
121
133
|
/* @__PURE__ */ e(
|
|
122
134
|
"input",
|
|
123
135
|
{
|
|
124
|
-
...
|
|
136
|
+
...T,
|
|
125
137
|
type: "range",
|
|
126
|
-
id:
|
|
127
|
-
value:
|
|
128
|
-
min:
|
|
129
|
-
max:
|
|
130
|
-
step:
|
|
131
|
-
disabled:
|
|
132
|
-
onChange:
|
|
138
|
+
id: h,
|
|
139
|
+
value: t,
|
|
140
|
+
min: o,
|
|
141
|
+
max: m,
|
|
142
|
+
step: c,
|
|
143
|
+
disabled: l,
|
|
144
|
+
onChange: R,
|
|
133
145
|
"aria-label": D(
|
|
134
|
-
typeof
|
|
146
|
+
typeof d?.label != "string" ? T["aria-label"] : void 0
|
|
135
147
|
),
|
|
136
|
-
"aria-valuetext":
|
|
137
|
-
"aria-describedby":
|
|
138
|
-
className:
|
|
148
|
+
"aria-valuetext": p ? v : void 0,
|
|
149
|
+
"aria-describedby": _ ?? F,
|
|
150
|
+
className: s(
|
|
139
151
|
"dial-kit-slider absolute inset-0 h-full w-full",
|
|
140
|
-
|
|
152
|
+
q
|
|
141
153
|
)
|
|
142
154
|
}
|
|
143
155
|
)
|
|
144
156
|
] }),
|
|
145
|
-
|
|
146
|
-
|
|
157
|
+
M && /* @__PURE__ */ e("div", { className: "flex items-center", children: w ? /* @__PURE__ */ e(
|
|
158
|
+
le,
|
|
159
|
+
{
|
|
160
|
+
"aria-label": D(
|
|
161
|
+
H ?? (typeof d?.label == "string" ? d.label : void 0)
|
|
162
|
+
),
|
|
163
|
+
value: Q ?? t.toFixed($),
|
|
164
|
+
min: o,
|
|
165
|
+
max: m,
|
|
166
|
+
step: c,
|
|
167
|
+
disabled: l,
|
|
168
|
+
size: ee.Small,
|
|
169
|
+
containerClassName: "w-12",
|
|
170
|
+
className: "text-center",
|
|
171
|
+
onChange: W,
|
|
172
|
+
onBlur: X
|
|
173
|
+
}
|
|
174
|
+
) : S }),
|
|
175
|
+
a && /* @__PURE__ */ e(
|
|
147
176
|
"div",
|
|
148
177
|
{
|
|
149
|
-
className:
|
|
178
|
+
className: s(
|
|
150
179
|
"dial-tiny-text flex text-secondary",
|
|
151
|
-
|
|
180
|
+
g && "col-start-2"
|
|
152
181
|
),
|
|
153
|
-
children:
|
|
154
|
-
/* @__PURE__ */ e("span", { children:
|
|
155
|
-
/* @__PURE__ */ e("span", { className: "flex-1 text-center", children:
|
|
156
|
-
/* @__PURE__ */ e("span", { children:
|
|
157
|
-
] }) : /* @__PURE__ */ n(
|
|
158
|
-
/* @__PURE__ */ e("span", { children:
|
|
159
|
-
/* @__PURE__ */ e("span", { className: "ml-auto", children:
|
|
182
|
+
children: a.length === 3 ? /* @__PURE__ */ n(j, { children: [
|
|
183
|
+
/* @__PURE__ */ e("span", { children: a[0] }),
|
|
184
|
+
/* @__PURE__ */ e("span", { className: "flex-1 text-center", children: a[1] }),
|
|
185
|
+
/* @__PURE__ */ e("span", { children: a[2] })
|
|
186
|
+
] }) : /* @__PURE__ */ n(j, { children: [
|
|
187
|
+
/* @__PURE__ */ e("span", { children: a[0] }),
|
|
188
|
+
/* @__PURE__ */ e("span", { className: "ml-auto", children: a[1] })
|
|
160
189
|
] })
|
|
161
190
|
}
|
|
162
191
|
)
|
|
163
192
|
]
|
|
164
193
|
}
|
|
165
194
|
),
|
|
166
|
-
/* @__PURE__ */ e(
|
|
167
|
-
!
|
|
195
|
+
/* @__PURE__ */ e(te, { id: _, text: u }),
|
|
196
|
+
!u && /* @__PURE__ */ e(ne, { id: F, text: C })
|
|
168
197
|
] })
|
|
169
198
|
] });
|
|
170
199
|
};
|
|
171
200
|
export {
|
|
172
|
-
|
|
201
|
+
Ne as Slider
|
|
173
202
|
};
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
const
|
|
2
|
-
if (
|
|
1
|
+
const u = (t, n) => {
|
|
2
|
+
if (t <= 0 || n <= 0)
|
|
3
3
|
return [];
|
|
4
|
-
const
|
|
4
|
+
const r = Math.floor(t / n + 1e-9);
|
|
5
5
|
return Array.from(
|
|
6
|
-
{ length:
|
|
7
|
-
(
|
|
6
|
+
{ length: r },
|
|
7
|
+
(o, e) => (e + 1) * n / t * 100
|
|
8
8
|
);
|
|
9
|
+
}, s = (t) => (t.toString().split(".")[1] ?? "").length, a = (t, n, r, o) => {
|
|
10
|
+
const e = Math.min(r, Math.max(n, t));
|
|
11
|
+
if (o <= 0)
|
|
12
|
+
return e;
|
|
13
|
+
const c = Math.round(Number(((e - n) / o).toFixed(9))), i = n + c * o;
|
|
14
|
+
return Number(Math.min(r, i).toFixed(s(o)));
|
|
9
15
|
};
|
|
10
16
|
export {
|
|
11
|
-
|
|
17
|
+
s as getStepPrecision,
|
|
18
|
+
u as getTickPercents,
|
|
19
|
+
a as snapToStep
|
|
12
20
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.15.0-dev.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "0.15.0-dev.53",
|
|
3
|
+
"generatedAt": "2026-10-08T11:41:20.370Z",
|
|
4
4
|
"kit": {
|
|
5
5
|
"name": "@epam/ai-dial-ui-kit",
|
|
6
6
|
"description": "A modern UI kit for building AI DIAL interfaces with React",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n return (\n <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n <h1>Test library</h1>\n <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n </div>\n );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
|
|
18
18
|
},
|
|
19
19
|
"styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class | Design name | Weight | Size / Line-height |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text` | Display 1 | semibold | 32px / 48px |\n| `.dial-display2-text` | Display 2 | semibold | 28px / 40px |\n| `.dial-display3-text` | Display 3 | semibold | 22px / 32px |\n| `.dial-h1-text` | Heading 1 | semibold | 20px / 28px |\n| `.dial-h2-text` | Heading 2 | semibold | 18px / 26px |\n| `.dial-h3-text` | Heading 3 | semibold | 16px / 24px |\n| `.dial-body-text` | Body Text | normal | 16px / 24px |\n| `.dial-body-semi-text` | Body Text (Semi Bold) | semibold | 16px / 24px |\n| `.dial-body-paragraph-text` | Body Paragraph | normal | 16px / 26px |\n| `.dial-body-paragraph-semi-text` | Body Paragraph (Semi Bold) | semibold | 16px / 26px |\n| `.dial-small-text` | Small Text | normal | 14px / 20px |\n| `.dial-small-semi-text` | Small Text (Semi Bold) | semibold | 14px / 20px |\n| `.dial-small-paragraph-text` | Small Paragraph | normal | 14px / 24px |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px |\n| `.dial-tiny-text` | Tiny Text | normal | 12px / 16px |\n| `.dial-tiny-lead-text` | Tiny Text Lead | normal | 12px / 16px (+0.03em, uppercase) |\n| `.dial-tiny-semi-text` | Tiny Text (Semi Bold) | semibold | 12px / 16px |\n| `.dial-tiny-lead-semi-text` | Tiny Text Lead (Semi Bold) | semibold | 12px / 16px (+0.03em, uppercase) |\n| `.dial-caption-text` | Caption | normal | 10px / 12px |\n| `.dial-caption-lead-semi-text` | Caption Lead (Semi Bold) | semibold | 10px / 12px (+0.06em, uppercase) |\n| `.dial-code-text` | Code | normal | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text` | Italic | normal | 18px / 22px (serif, italic) |\n| `.dial-small-italic-text` | Small Italic | normal | 14px / 20px (serif, italic) |\n| `.dial-tiny-italic-text` | Tiny Italic | normal | 12px / 16px (serif, italic) |\n| `.dial-caption-italic-text` | Caption Italic | normal | 10px / 12px (serif, italic) |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
|
|
20
|
-
"theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" /> // darkest background\n<div className=\"bg-layer-1\" /> // main content area\n<div className=\"bg-layer-2\" /> // elevated panels\n\n// Text\n<span className=\"text-primary\" /> // main text color\n<span className=\"text-secondary\" /> // muted text\n<span className=\"text-error\" /> // error state\n\n// Borders\n<div className=\"border border-primary\" /> // standard border\n<div className=\"border border-error\" /> // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n --bg-layer-0: #000000;\n --bg-layer-1: #0c101d;\n --bg-layer-2: #161b2d;\n --bg-layer-3: #1d2439;\n --text-primary: #eef1f7;\n --text-secondary: #9fa6bd;\n --text-error: #f76464;\n --stroke-primary: #696e7c;\n --controls-bg-accent-primary: #3664e2;\n /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#
|
|
20
|
+
"theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" /> // darkest background\n<div className=\"bg-layer-1\" /> // main content area\n<div className=\"bg-layer-2\" /> // elevated panels\n\n// Text\n<span className=\"text-primary\" /> // main text color\n<span className=\"text-secondary\" /> // muted text\n<span className=\"text-error\" /> // error state\n\n// Borders\n<div className=\"border border-primary\" /> // standard border\n<div className=\"border border-error\" /> // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n --bg-layer-0: #000000;\n --bg-layer-1: #0c101d;\n --bg-layer-2: #161b2d;\n --bg-layer-3: #1d2439;\n --text-primary: #eef1f7;\n --text-secondary: #9fa6bd;\n --text-error: #f76464;\n --stroke-primary: #696e7c;\n --controls-bg-accent-primary: #3664e2;\n /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha` | `var(--bg-control-error-alpha)` | `#F764641A` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F7646426` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-1` | `var(--shadow-xs-1)` | `#2764D933` |\n| `xs-2` | `var(--shadow-xs-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
|
|
21
21
|
"components": [
|
|
22
22
|
{
|
|
23
23
|
"name": "Spinner",
|
|
@@ -4159,7 +4159,7 @@
|
|
|
4159
4159
|
"name": "AutocompleteTagInput",
|
|
4160
4160
|
"category": "Components_2_0",
|
|
4161
4161
|
"generation": "2.0",
|
|
4162
|
-
"description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nReach for when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
|
|
4162
|
+
"description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nWith `openOnFocus`, focusing or clicking the input opens the list of every\nsuggestion that is not yet a tag, uncapped by `maxSuggestions`, with nothing\nhighlighted, so Enter adds nothing the user did not choose. Picking one keeps\nthe list open for the next pick; typing filters it as usual.\n\nReach for when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
|
|
4163
4163
|
"props": [
|
|
4164
4164
|
{
|
|
4165
4165
|
"name": "id",
|
|
@@ -4192,6 +4192,13 @@
|
|
|
4192
4192
|
"defaultValue": "DEFAULT_MAX_SUGGESTIONS",
|
|
4193
4193
|
"description": "How many matching suggestions the list shows at most."
|
|
4194
4194
|
},
|
|
4195
|
+
{
|
|
4196
|
+
"name": "openOnFocus",
|
|
4197
|
+
"type": "boolean",
|
|
4198
|
+
"required": false,
|
|
4199
|
+
"defaultValue": "false",
|
|
4200
|
+
"description": "Opens the full list of suggestions that are not yet tags on focus or click, and keeps it open after a pick."
|
|
4201
|
+
},
|
|
4195
4202
|
{
|
|
4196
4203
|
"name": "size",
|
|
4197
4204
|
"type": "ElementSize",
|
|
@@ -4415,6 +4422,19 @@
|
|
|
4415
4422
|
"required": false,
|
|
4416
4423
|
"description": "Content after the track, vertically centred on it"
|
|
4417
4424
|
},
|
|
4425
|
+
{
|
|
4426
|
+
"name": "showValueInput",
|
|
4427
|
+
"type": "boolean",
|
|
4428
|
+
"required": false,
|
|
4429
|
+
"defaultValue": "false",
|
|
4430
|
+
"description": "Renders a compact (24px), synced `NumberInput` after the track (clamped to `min`/`max`, snapped to `step`); replaces `rightContent`"
|
|
4431
|
+
},
|
|
4432
|
+
{
|
|
4433
|
+
"name": "valueInputAriaLabel",
|
|
4434
|
+
"type": "string",
|
|
4435
|
+
"required": false,
|
|
4436
|
+
"description": "Accessible name of the value input; defaults to a string `labelProps.label`"
|
|
4437
|
+
},
|
|
4418
4438
|
{
|
|
4419
4439
|
"name": "caption",
|
|
4420
4440
|
"type": "string",
|
|
@@ -12426,8 +12446,8 @@
|
|
|
12426
12446
|
{
|
|
12427
12447
|
"name": "GRID_THEME_PARAMS",
|
|
12428
12448
|
"sourceFile": "components/New/Grid/constants.ts",
|
|
12429
|
-
"description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover
|
|
12430
|
-
"signature": "GRID_THEME_PARAMS = {\n accentColor: 'var(--bg-control-accent, #1D4ED8)',\n backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n selectedRowBackgroundColor
|
|
12449
|
+
"description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover uses the subtle accent tint and selection the slightly stronger\nselected tint, as in the grid cell design.",
|
|
12450
|
+
"signature": "GRID_THEME_PARAMS = {\n accentColor: 'var(--bg-control-accent, #1D4ED8)',\n backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n selectedRowBackgroundColor:\n 'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n // 1px main stroke that controls and standalone dividers use, so a dense grid\n // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n // antialiased rather than snapped, which is what makes the line look lighter.\n // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n // by the theme: those frame the table and separate its regions rather than\n // dividing rows and columns.\n rowBorder: THIN_TABLE_DIVIDER,\n // Off: ag-Grid draws this one both under the header and between the title\n // row and the filter row, and the design has no line between those two. The\n // line under the header is drawn at 1px in `styles/grid.scss`.\n headerRowBorder: false,\n headerColumnBorder: THIN_TABLE_DIVIDER,\n // The design's header divider is a short 12px mark centred in the cell, not\n // the 20px (half the row) ag-Grid draws by default.\n headerColumnBorderHeight: 12,\n chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n foregroundColor: 'var(--text-primary, #161B2D)',\n headerTextColor: 'var(--text-secondary, #57647A)',\n // 1.0 asked the browser for dark native widgets while painting a light\n // theme; the scheme now matches the palette it is used with.\n browserColorScheme: 'light',\n headerFontSize: 14,\n headerFontWeight: 600,\n fontSize: 14,\n fontFamily: 'var(--theme-font, var(--font-inter))',\n spacing: 4,\n borderRadius: 4,\n // Search fields in the header and filter popups: `rounded-lg`.\n inputBorderRadius: 8,\n wrapperBorderRadius: 8,\n}"
|
|
12431
12451
|
},
|
|
12432
12452
|
{
|
|
12433
12453
|
"name": "GRID_ROW_HEIGHT",
|