@actioneer/ads 1.0.6 → 1.0.8
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/DESIGN.md +80 -86
- package/README.md +6 -0
- package/components/ai-elements/chart.js +20 -20
- package/components/ai-elements/inline-citation.js +50 -50
- package/components/ai-elements/message.js +1 -1
- package/components/ai-elements/tool.js +5 -5
- package/components/alert.d.ts +5 -4
- package/components/alert.js +91 -79
- package/components/answer.js +1 -1
- package/components/assistant-ui/action-bar.js +1 -1
- package/components/assistant-ui/attachment.js +68 -49
- package/components/assistant-ui/composer-add-context.js +1 -1
- package/components/assistant-ui/composer-trigger-popover.js +1 -1
- package/components/assistant-ui/composer.js +13 -13
- package/components/assistant-ui/message-timing.js +6 -6
- package/components/assistant-ui/selection-toolbar.js +5 -5
- package/components/assistant-ui/sources.js +15 -15
- package/components/assistant-ui/tooltip-icon-button.js +18 -14
- package/components/audio-waveform.d.ts +21 -8
- package/components/audio-waveform.js +371 -94
- package/components/autocomplete.js +9 -9
- package/components/breadcrumbs.js +32 -38
- package/components/button.js +83 -73
- package/components/card.js +1 -1
- package/components/chart.js +732 -673
- package/components/chip.js +37 -35
- package/components/command-palette.js +12 -12
- package/components/connector-card.d.ts +1 -2
- package/components/connector-card.js +17 -17
- package/components/date-range-picker.js +1 -2
- package/components/drawer.js +9 -10
- package/components/dropdown.js +1 -1
- package/components/empty-state.d.ts +2 -0
- package/components/empty-state.js +17 -15
- package/components/field.js +9 -10
- package/components/file-dropzone.d.ts +6 -3
- package/components/file-dropzone.js +72 -60
- package/components/infinite-canvas.js +9 -9
- package/components/modal.js +1 -1
- package/components/page-body.js +8 -8
- package/components/popover.js +11 -11
- package/components/progress-circle.d.ts +1 -1
- package/components/progress-circle.js +57 -48
- package/components/radio.d.ts +1 -1
- package/components/radio.js +53 -53
- package/components/segmented.d.ts +1 -0
- package/components/segmented.js +34 -36
- package/components/select.js +2 -2
- package/components/selection-action-bar.js +32 -31
- package/components/setting-row.js +10 -10
- package/components/sidebar.js +74 -73
- package/components/slider.js +5 -5
- package/components/stepper.d.ts +1 -1
- package/components/stepper.js +1 -1
- package/components/switch.js +10 -10
- package/components/table.d.ts +17 -5
- package/components/table.js +559 -405
- package/components/tabs.js +41 -35
- package/components/timeline.js +3 -3
- package/components/toast.js +53 -56
- package/components/ui/button.js +4 -4
- package/components/ui/dialog.js +1 -1
- package/components/viz-charts.js +263 -221
- package/examples/README.md +30 -0
- package/examples/agents-screen.tsx +477 -0
- package/examples/settings-screen.tsx +90 -0
- package/examples/workspace-header.tsx +71 -0
- package/lib/icons.d.ts +8 -0
- package/lib/icons.js +171 -118
- package/llms.txt +16 -16
- package/manifest.json +178 -54
- package/package.json +1 -1
- package/styles.css +60 -72
- package/theme.css +55 -63
package/lib/icons.js
CHANGED
|
@@ -1,123 +1,176 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import * as
|
|
4
|
-
import { Code as
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { jsxs as p, Fragment as d, jsx as a } from "react/jsx-runtime";
|
|
3
|
+
import * as r from "react";
|
|
4
|
+
import { Code as $, Check as k, Copy as S, FileText as f, UploadSimple as P, X as T, EyeSlash as w, Eye as L, MagnifyingGlass as A, Minus as m, Plus as x, CaretDown as B, Info as I, WarningCircle as y, Warning as U, CheckCircle as F, CaretRight as M, CaretUp as D, ArrowsDownUp as O, ChatCircle as b, ArrowUpRight as R, Clock as v, Database as H, ArrowSquareOut as E, Table as G, CaretLeft as W, CornersOut as z, Magnet as V, Tray as N, ArrowLeft as j, DotsThree as X, User as Q, XCircle as q, CircleDashed as _, ArrowsClockwise as J, Paperclip as K, Quotes as Y, At as Z, Lightning as ee, Sparkle as oe, File as te, DownloadSimple as ne, Image as C, BracketsCurly as se, MusicNotes as ae, VideoCamera as re, ImageBroken as ce, Pulse as ie, Archive as le, ArrowDown as he, ArrowRight as Ce, ArrowUp as ge, Scroll as ue, Bell as pe, Stack as de, BookOpen as $e, Brain as ke, CalendarBlank as Se, Phone as fe, ListChecks as Pe, Cube as Te, DotsNine as we, FunnelSimple as Le, Folder as Ae, FolderOpen as me, Gauge as xe, GitBranch as Be, Hash as Ie, ClockCounterClockwise as ye, House as Ue, SquaresFour as Fe, Leaf as Me, Lightbulb as De, Link as Oe, CircleNotch as be, SignOut as Re, Envelope as ve, Microphone as He, MicrophoneSlash as Ee, DotsThreeVertical as Ge, Palette as We, SidebarSimple as ze, Pause as Ve, PencilSimple as Ne, PhoneIncoming as je, PhoneSlash as Xe, ChartPie as Qe, Play as qe, Plug as _e, Presentation as Je, Rocket as Ke, Gear as Ye, Shapes as Ze, ShareNetwork as eo, Star as oo, Stop as to, ArrowsLeftRight as no, Target as so, Binoculars as ao, TextB as ro, TextT as co, TextItalic as io, TextStrikethrough as lo, TextUnderline as ho, ToggleRight as Co, Trash as go, Users as uo, Wrench as po } from "@phosphor-icons/react";
|
|
5
|
+
const $o = r.createContext(!1), ko = /* @__PURE__ */ new Set(["Info"]), So = new Set(
|
|
6
|
+
[
|
|
7
|
+
"FunnelSimple",
|
|
8
|
+
"X",
|
|
9
|
+
"TextT",
|
|
10
|
+
"TextItalic",
|
|
11
|
+
"TextStrikethrough",
|
|
12
|
+
"TextUnderline",
|
|
13
|
+
"Code",
|
|
14
|
+
"Minus",
|
|
15
|
+
"DotsNine",
|
|
16
|
+
"Link",
|
|
17
|
+
"Plus",
|
|
18
|
+
"Check",
|
|
19
|
+
"Pulse",
|
|
20
|
+
"ListChecks",
|
|
21
|
+
"BracketsCurly"
|
|
22
|
+
].map((o) => `${o}Icon`)
|
|
23
|
+
);
|
|
24
|
+
function e(o, c) {
|
|
25
|
+
const i = r.forwardRef(function({ strokeWidth: l, weight: g, className: t, ...n }, h) {
|
|
26
|
+
const u = r.useContext($o), s = g ?? (l != null && l >= 2 ? "bold" : "regular");
|
|
27
|
+
return u && ko.has(c) && s !== "fill" ? /* @__PURE__ */ p(d, { children: [
|
|
28
|
+
/* @__PURE__ */ a(
|
|
29
|
+
o,
|
|
30
|
+
{
|
|
31
|
+
ref: h,
|
|
32
|
+
size: "1em",
|
|
33
|
+
weight: s,
|
|
34
|
+
className: [t, "ads-icon-rest"].filter(Boolean).join(" "),
|
|
35
|
+
...n
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ a(
|
|
39
|
+
o,
|
|
40
|
+
{
|
|
41
|
+
size: "1em",
|
|
42
|
+
weight: So.has(o.displayName ?? "") ? "bold" : "fill",
|
|
43
|
+
"aria-hidden": !0,
|
|
44
|
+
className: [t, "ads-icon-hover"].filter(Boolean).join(" "),
|
|
45
|
+
...n
|
|
46
|
+
}
|
|
47
|
+
)
|
|
48
|
+
] }) : /* @__PURE__ */ a(
|
|
49
|
+
o,
|
|
50
|
+
{
|
|
51
|
+
ref: h,
|
|
52
|
+
size: "1em",
|
|
53
|
+
weight: s,
|
|
54
|
+
className: t,
|
|
55
|
+
...n
|
|
56
|
+
}
|
|
57
|
+
);
|
|
9
58
|
});
|
|
10
|
-
return
|
|
59
|
+
return i.displayName = c, i;
|
|
11
60
|
}
|
|
12
|
-
const
|
|
61
|
+
const wo = e(he, "ArrowDown"), Lo = e(j, "ArrowLeft"), Ao = e(Ce, "ArrowRight"), mo = e(ge, "ArrowUp"), xo = e(R, "ArrowUpRight"), Bo = e(B, "ChevronDown"), Io = e(W, "ChevronLeft"), yo = e(M, "ChevronRight"), Uo = e(D, "ChevronUp"), Fo = e(O, "SortIcon"), Mo = e(no, "SwapHorizontal"), Do = e(E, "ExternalLink"), Oo = e(ze, "PanelLeft"), bo = e(Z, "At"), Ro = e(fe, "Call"), vo = e(je, "PhoneIncoming"), Ho = e(T, "Close"), Eo = e(q, "CloseCircle"), Go = e(S, "Copy"), Wo = e(ne, "Download"), zo = e(Re, "LogOut"), Vo = e(He, "Mic"), No = e(Ee, "MicOff"), jo = e(Xe, "PhoneOff"), Xo = e(Ne, "Pencil"), Qo = e(Y, "Quote"), qo = e(L, "Eye"), _o = e(w, "EyeOff"), Jo = e(Ie, "Hash"), Ko = e(C, "ImageUpload"), Yo = e(P, "Upload"), Zo = e(co, "TextFont"), et = e(ro, "TextBold"), ot = e(io, "TextItalicStyle"), tt = e(lo, "TextStrike"), nt = e(
|
|
62
|
+
ho,
|
|
63
|
+
"TextUnderlineStyle"
|
|
64
|
+
), st = e(Co, "ToggleOn"), at = e(Se, "Calendar"), rt = e(v, "Clock"), ct = e($, "Code"), it = e(to, "Stop"), lt = e(V, "Magnet"), ht = e(z, "Maximize"), Ct = e(m, "Minus"), gt = e(X, "MoreHorizontal"), ut = e(Ge, "MoreVertical"), pt = e(we, "DragHandle"), dt = e(Oe, "Link"), $t = e(x, "Plus"), kt = e(J, "Refresh"), St = e(ue, "AuditTrail"), ft = e(A, "Search"), Pt = e(eo, "Share"), Tt = e(go, "Trash"), wt = e(k, "Check"), Lt = e(be, "Loader"), At = e(F, "CheckCircle"), mt = e(I, "Info"), xt = e(U, "Warning"), Bt = e(pe, "Bell"), It = e(y, "WarningCircle"), yt = e(ie, "Activity"), Ut = e(b, "AgentChat"), Ft = e(ee, "Bolt"), Mt = e($e, "BookOpen"), Dt = e(ke, "Brain"), Ot = e(Pe, "CheckList"), bt = e(Te, "Component"), Rt = e(H, "Database"), vt = e(G, "Table"), Ht = e(Le, "Filter"), Et = e(le, "Archive"), Gt = e(te, "File"), Wt = e(f, "FileText"), zt = e(Ae, "Folder"), Vt = e(C, "Image"), Nt = e(ce, "ImageOff"), jt = e(ae, "Music"), Xt = e(re, "Video"), Qt = e(se, "Braces"), qt = e(me, "FolderOpen"), _t = e(xe, "Gauge"), Jt = e(Be, "GitBranch"), Kt = e(ye, "HistoryClock"), Yt = e(Ue, "Home"), Zt = e(de, "Blocks"), en = e(N, "Inbox"), on = e(De, "Lightbulb"), tn = e(Me, "Leaf"), nn = e(Fe, "LayoutGrid"), sn = e(ve, "Mail"), an = e(We, "Palette"), rn = e(Qe, "PieChart"), cn = e(_e, "Plug"), ln = e(Ke, "Rocket"), hn = e(Ye, "Settings"), Cn = e(Ze, "Shapes"), gn = e(oe, "Sparkles"), un = e(oo, "Star"), pn = e(ao, "Telescope"), dn = e(so, "Target"), $n = e(Q, "User"), kn = e(uo, "Users"), Sn = e(qe, "Play"), fn = e(Je, "Presentation"), Pn = e(Ve, "Pause"), Tn = e(K, "Paperclip"), wn = e(_, "CircleDashed"), Ln = e(po, "Wrench");
|
|
13
65
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
dt as
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
66
|
+
yt as Activity,
|
|
67
|
+
Ut as AgentChat,
|
|
68
|
+
Et as Archive,
|
|
69
|
+
wo as ArrowDown,
|
|
70
|
+
Lo as ArrowLeft,
|
|
71
|
+
Ao as ArrowRight,
|
|
72
|
+
mo as ArrowUp,
|
|
73
|
+
xo as ArrowUpRight,
|
|
74
|
+
bo as At,
|
|
75
|
+
St as AuditTrail,
|
|
76
|
+
Bt as Bell,
|
|
77
|
+
Zt as Blocks,
|
|
78
|
+
Ft as Bolt,
|
|
79
|
+
Mt as BookOpen,
|
|
80
|
+
Qt as Braces,
|
|
81
|
+
Dt as Brain,
|
|
82
|
+
at as Calendar,
|
|
83
|
+
Ro as Call,
|
|
84
|
+
wt as Check,
|
|
85
|
+
At as CheckCircle,
|
|
86
|
+
Ot as CheckList,
|
|
87
|
+
Bo as ChevronDown,
|
|
88
|
+
Io as ChevronLeft,
|
|
89
|
+
yo as ChevronRight,
|
|
90
|
+
Uo as ChevronUp,
|
|
91
|
+
wn as CircleDashed,
|
|
92
|
+
rt as Clock,
|
|
93
|
+
Ho as Close,
|
|
94
|
+
Eo as CloseCircle,
|
|
95
|
+
ct as Code,
|
|
96
|
+
bt as Component,
|
|
97
|
+
Go as Copy,
|
|
98
|
+
Rt as Database,
|
|
99
|
+
Wo as Download,
|
|
100
|
+
pt as DragHandle,
|
|
101
|
+
Do as ExternalLink,
|
|
102
|
+
qo as Eye,
|
|
103
|
+
_o as EyeOff,
|
|
104
|
+
Gt as File,
|
|
105
|
+
Wt as FileText,
|
|
106
|
+
Ht as Filter,
|
|
107
|
+
zt as Folder,
|
|
108
|
+
qt as FolderOpen,
|
|
109
|
+
_t as Gauge,
|
|
110
|
+
Jt as GitBranch,
|
|
111
|
+
Jo as Hash,
|
|
112
|
+
Kt as HistoryClock,
|
|
113
|
+
Yt as Home,
|
|
114
|
+
$o as IconHoverFillContext,
|
|
115
|
+
Vt as Image,
|
|
116
|
+
Nt as ImageOff,
|
|
117
|
+
Ko as ImageUpload,
|
|
118
|
+
en as Inbox,
|
|
119
|
+
mt as Info,
|
|
120
|
+
nn as LayoutGrid,
|
|
121
|
+
tn as Leaf,
|
|
122
|
+
on as Lightbulb,
|
|
123
|
+
dt as Link,
|
|
124
|
+
Lt as Loader,
|
|
125
|
+
zo as LogOut,
|
|
126
|
+
lt as Magnet,
|
|
127
|
+
sn as Mail,
|
|
128
|
+
ht as Maximize,
|
|
129
|
+
Vo as Mic,
|
|
130
|
+
No as MicOff,
|
|
131
|
+
Ct as Minus,
|
|
132
|
+
gt as MoreHorizontal,
|
|
133
|
+
ut as MoreVertical,
|
|
134
|
+
jt as Music,
|
|
135
|
+
an as Palette,
|
|
136
|
+
Oo as PanelLeft,
|
|
137
|
+
Tn as Paperclip,
|
|
138
|
+
Pn as Pause,
|
|
139
|
+
Xo as Pencil,
|
|
140
|
+
vo as PhoneIncoming,
|
|
141
|
+
jo as PhoneOff,
|
|
142
|
+
rn as PieChart,
|
|
143
|
+
Sn as Play,
|
|
144
|
+
cn as Plug,
|
|
145
|
+
$t as Plus,
|
|
146
|
+
fn as Presentation,
|
|
147
|
+
Qo as Quote,
|
|
148
|
+
kt as Refresh,
|
|
149
|
+
ln as Rocket,
|
|
150
|
+
ft as Search,
|
|
151
|
+
hn as Settings,
|
|
152
|
+
Cn as Shapes,
|
|
153
|
+
Pt as Share,
|
|
154
|
+
Fo as SortIcon,
|
|
155
|
+
gn as Sparkles,
|
|
156
|
+
un as Star,
|
|
157
|
+
it as Stop,
|
|
158
|
+
Mo as SwapHorizontal,
|
|
159
|
+
vt as Table,
|
|
160
|
+
dn as Target,
|
|
161
|
+
pn as Telescope,
|
|
162
|
+
et as TextBold,
|
|
163
|
+
Zo as TextFont,
|
|
164
|
+
ot as TextItalicStyle,
|
|
165
|
+
tt as TextStrike,
|
|
166
|
+
nt as TextUnderlineStyle,
|
|
167
|
+
st as ToggleOn,
|
|
168
|
+
Tt as Trash,
|
|
169
|
+
Yo as Upload,
|
|
170
|
+
$n as User,
|
|
171
|
+
kn as Users,
|
|
172
|
+
Xt as Video,
|
|
173
|
+
xt as Warning,
|
|
174
|
+
It as WarningCircle,
|
|
175
|
+
Ln as Wrench
|
|
123
176
|
};
|
package/llms.txt
CHANGED
|
@@ -70,8 +70,8 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
|
|
|
70
70
|
- `menu-stroke` — The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.
|
|
71
71
|
- `toast-stroke` — The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.
|
|
72
72
|
- `tree-stroke` — The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.
|
|
73
|
-
- `ring` — Focus ring and scrim, both translucent
|
|
74
|
-
- `overlay` — Focus ring and scrim, both translucent
|
|
73
|
+
- `ring` — Focus ring and scrim, both translucent neutral ink.
|
|
74
|
+
- `overlay` — Focus ring and scrim, both translucent neutral ink.
|
|
75
75
|
|
|
76
76
|
## Design principles
|
|
77
77
|
|
|
@@ -89,17 +89,16 @@ Delineate SURFACES (cards, panels, sidebars, page regions) with color contrast,
|
|
|
89
89
|
- Don't: Alternate persistent neutral fills inside one panel (for example white Panel → grey item → white child); flatten the item or promote the recess to the container.
|
|
90
90
|
- Don't: Give a filled control no stroke on the tinted canvas — it disappears; it needs a crisp edge.
|
|
91
91
|
|
|
92
|
-
### 2.
|
|
92
|
+
### 2. Five shadows, floating layers only [judgment]
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
ADS has five shadow tokens: shadow-0 (flat, the default), shadow-float, shadow-overlay, and the two table scroll-hint smudges. Only a layer that floats above the page may carry float or overlay; everything in the page is flat.
|
|
95
95
|
|
|
96
|
-
- Do: Keep
|
|
97
|
-
- Do:
|
|
98
|
-
- Do:
|
|
99
|
-
- Don't:
|
|
100
|
-
- Don't: Use raw shadow values or
|
|
101
|
-
- Don't:
|
|
102
|
-
- Don't: Use shadow-500 or shadow-600 as a routine default.
|
|
96
|
+
- Do: Keep cards, panels, chips, buttons, tabs, fields, thumbs, and other in-page surfaces at shadow-0; separate them with fill, border, or spacing.
|
|
97
|
+
- Do: Use shadow-float for floating layers that sit over content: toasts, toolbars, the chat composer dock, and any menu or popover that needs lift beyond its border.
|
|
98
|
+
- Do: Use shadow-overlay for modals, dialogs, and overlay drawers, so a dialog always reads above a menu.
|
|
99
|
+
- Don't: Put a shadow on an in-page surface for decoration or to signal that it is clickable.
|
|
100
|
+
- Don't: Use raw shadow values, inset glows, or the removed numbered levels and elevation hook.
|
|
101
|
+
- Don't: Invent a third floating level; stack order comes from float vs overlay.
|
|
103
102
|
|
|
104
103
|
### 3. Motion follows the interaction [lint: unbounded-transition, sluggish-easing, zero-scale-entrance, undersized-zoom-entrance, raw-spring-config]
|
|
105
104
|
|
|
@@ -188,9 +187,9 @@ A page-level Back control sits immediately before the page title in the leading
|
|
|
188
187
|
|
|
189
188
|
### 11. Tabs lead; scoped search trails [judgment]
|
|
190
189
|
|
|
191
|
-
When tabs and a search field control the same content, they share one responsive control row: the tab
|
|
190
|
+
When tabs and a search field control the same content, they share one responsive control row: the tab list leads with its triggers left-aligned at their natural width over a baseline that fades from WG3 to transparent, and search sits at the trailing edge. Stack only when the container cannot fit both.
|
|
192
191
|
|
|
193
|
-
- Do: Keep
|
|
192
|
+
- Do: Keep tab triggers left-aligned at their natural width, then place the scoped search field opposite them in the same toolbar.
|
|
194
193
|
- Do: On constrained containers, stack tabs first and search second while preserving their relationship.
|
|
195
194
|
- Don't: Stretch the tab track to fill the space between its labels and the search field.
|
|
196
195
|
- Don't: Put a scoped search field on a separate row above its tabs when both controls fit side by side.
|
|
@@ -254,7 +253,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
254
253
|
- [Field] — Wrap any form control (Input, Select, NumberField, Textarea, etc.) with a label plus optional description or error footer. [docs](https://ads.actioneer.dev/#/field)
|
|
255
254
|
- [FieldDescription] — component [docs](https://ads.actioneer.dev/#/field)
|
|
256
255
|
- [FieldError] — component [docs](https://ads.actioneer.dev/#/field)
|
|
257
|
-
- [FileDropzone] — component (variants: isDragging: true|false; isDisabled: true|false) [docs](https://ads.actioneer.dev/#/review/file-dropzone)
|
|
256
|
+
- [FileDropzone] — component (variants: hasFiles: true|false; isDragging: true|false; isDisabled: true|false) [docs](https://ads.actioneer.dev/#/review/file-dropzone)
|
|
258
257
|
- [Heading] — Use Heading for semantic h1–h4 titles above a page, section, or card, sized by document level via `level` (never a `size` prop). [docs](https://ads.actioneer.dev/#/typography)
|
|
259
258
|
- [Kbd] — Use to display a keyboard shortcut or key name, inline in text or trailing a label in a shortcut list. [docs](https://ads.actioneer.dev/#/kbd)
|
|
260
259
|
- [Label] — component [docs](https://ads.actioneer.dev/#/field)
|
|
@@ -269,6 +268,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
269
268
|
- [Stepper] — component (variants: status: complete|current|upcoming|error; size: sm|md) [docs](https://ads.actioneer.dev/#/review/stepper)
|
|
270
269
|
- [Text] — Use Text for any body copy, caption, or inline run of prose instead of a raw p/span tag. [docs](https://ads.actioneer.dev/#/typography)
|
|
271
270
|
- [Tooltip] — Use to label a single hover/focus-triggered element (icon-only buttons, avatars, truncated text) with a short informational hint — not for actions or content that needs to stay open. [docs](https://ads.actioneer.dev/#/tooltip)
|
|
271
|
+
- [AudioWaveformLook] — TypeScript type
|
|
272
272
|
- [AudioWaveformProps] — TypeScript type
|
|
273
273
|
- [ButtonProps] — TypeScript type
|
|
274
274
|
- [CodeBlockProps] — TypeScript type
|
|
@@ -456,7 +456,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
456
456
|
- [SeriesChart] — component [docs](https://ads.actioneer.dev/#/viz-charts)
|
|
457
457
|
- [StatusAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
458
458
|
- [Tab] — component (variants: orientation: horizontal|vertical; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
|
|
459
|
-
- [Table] — Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Give a whole-row action an onClick and aria-label: TableRow then adds hover/focus feedback, a pointer cursor, and Enter/Space activation. The consumer decides whether that action navigates or opens a panel; TableRow owns neither destination. Display-only rows stay static; selection rows
|
|
459
|
+
- [Table] — Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Give a whole-row action an onClick and aria-label: TableRow then adds hover/focus feedback, a pointer cursor, and Enter/Space activation. The consumer decides whether that action navigates or opens a panel; TableRow owns neither destination. Display-only rows stay static. Single selection uses grouped radio buttons and keeps the chosen row selected; multiple selection uses checkboxes. Selecting or clearing a parent cascades through all descendants, including collapsed rows; partial groups show a mixed checkbox. Selection callbacks include the complete selected key set. Selected row fills fade from full soft-teal tint at the visible left edge to no tint at the right edge, including pinned cells. Use TableRow.childRows for collapsible hierarchies, expanded/defaultExpanded and onExpandedChange for disclosure, and stable rowKey values. Child rows open below their parent without shifting columns; the caret and parent label share one transparent disclosure button, separate from selection, and both turn the primary-action text color on hover. Sorting keeps child rows with their parent. Keep normal row geometry without a brand tint or hover-only corner rounding. Nested controls keep their own actions. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky. [docs](https://ads.actioneer.dev/#/table)
|
|
460
460
|
- [TableAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
|
|
461
461
|
- [TableBody] — component [docs](https://ads.actioneer.dev/#/table)
|
|
462
462
|
- [TableCell] — component [docs](https://ads.actioneer.dev/#/table)
|
|
@@ -650,7 +650,7 @@ Before using any component below, preserve its built-in motion and apply the mot
|
|
|
650
650
|
|
|
651
651
|
### Feedback
|
|
652
652
|
|
|
653
|
-
- [Alert] — Use for inline status messaging
|
|
653
|
+
- [Alert] — Use for inline status messaging in an outlined white container. Neutral 14px text leads, a softly tinted icon carries status, and actions align below the description. Add duration for a temporary announcement with a countdown bar; otherwise it remains persistent. (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
654
654
|
- [AlertDescription] — component (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
655
655
|
- [AlertTitle] — component (variants: variant: default|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/alert)
|
|
656
656
|
- [BrandMark] — component [docs](https://ads.actioneer.dev/#/brand-loader)
|