@actioneer/ads 0.5.7 → 0.5.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/bin/ads-init.mjs +6 -0
- package/components/accordion.js +50 -48
- package/components/agent-icon.d.ts +12 -0
- package/components/agent-icon.js +133 -120
- package/components/ai-elements/chain-of-thought.d.ts +1 -1
- package/components/ai-elements/chain-of-thought.js +108 -108
- package/components/ai-elements/chart.js +16 -14
- package/components/ai-elements/inline-citation.js +41 -41
- package/components/ai-elements/message.js +4 -4
- package/components/ai-elements/queue.js +7 -7
- package/components/ai-elements/research-activity.js +114 -114
- package/components/ai-elements/shimmer.d.ts +2 -2
- package/components/ai-elements/speech-input.js +28 -28
- package/components/ai-elements/task-progress.js +26 -16
- package/components/ai-elements/task.js +17 -17
- package/components/ai-elements/tool.js +6 -6
- package/components/ai-elements/transcript.js +6 -5
- package/components/ai-elements/voice.js +1 -1
- package/components/alert.js +10 -10
- package/components/answer-sources.js +1 -1
- package/components/answer.js +115 -114
- package/components/assistant-ui/action-bar.js +94 -48
- package/components/assistant-ui/attachment.js +103 -75
- package/components/assistant-ui/badge.d.ts +1 -1
- package/components/assistant-ui/badge.js +17 -17
- package/components/assistant-ui/chain-of-thought.d.ts +1 -1
- package/components/assistant-ui/composer-add-context.js +9 -9
- package/components/assistant-ui/composer-deep-research.js +5 -5
- package/components/assistant-ui/composer-harness.js +11 -9
- package/components/assistant-ui/composer-trigger-popover.js +45 -34
- package/components/assistant-ui/composer.js +59 -59
- package/components/assistant-ui/error.js +14 -14
- package/components/assistant-ui/file.d.ts +1 -1
- package/components/assistant-ui/image.d.ts +1 -1
- package/components/assistant-ui/image.js +113 -103
- package/components/assistant-ui/markdown-text.js +18 -18
- package/components/assistant-ui/message.js +46 -45
- package/components/assistant-ui/quote.js +1 -1
- package/components/assistant-ui/reasoning.d.ts +1 -1
- package/components/assistant-ui/reasoning.js +66 -77
- package/components/assistant-ui/suggestions.js +4 -4
- package/components/assistant-ui/thread.js +22 -22
- package/components/assistant-ui/tool-fallback.js +60 -63
- package/components/assistant-ui/tool-group.d.ts +1 -1
- package/components/assistant-ui/tool-group.js +36 -42
- package/components/audio-waveform.js +25 -24
- package/components/autocomplete.d.ts +1 -0
- package/components/autocomplete.js +45 -43
- package/components/avatar.js +24 -24
- package/components/badge.d.ts +1 -1
- package/components/breadcrumbs.js +2 -2
- package/components/button.d.ts +2 -2
- package/components/button.js +22 -20
- package/components/card.js +8 -8
- package/components/carousel.js +105 -104
- package/components/chart.js +9 -7
- package/components/checkbox.js +74 -38
- package/components/chip.d.ts +1 -1
- package/components/code-block.js +3 -3
- package/components/collapsible.js +67 -23
- package/components/connector-card.js +6 -6
- package/components/drawer.d.ts +15 -10
- package/components/drawer.js +78 -77
- package/components/dropdown.d.ts +2 -0
- package/components/dropdown.js +88 -79
- package/components/empty-state.d.ts +1 -1
- package/components/empty-state.js +7 -7
- package/components/field.d.ts +4 -0
- package/components/field.js +45 -34
- package/components/file-dropzone.js +12 -12
- package/components/index.d.ts +3 -0
- package/components/index.js +584 -558
- package/components/input-field.js +51 -46
- package/components/input.js +20 -20
- package/components/link.js +9 -9
- package/components/modal.js +105 -73
- package/components/navbar.d.ts +1 -1
- package/components/navbar.js +1 -1
- package/components/number-field.js +38 -29
- package/components/page-header.js +12 -12
- package/components/pagination.js +19 -19
- package/components/panel.js +2 -2
- package/components/pixel-blast-svg.js +3 -3
- package/components/pixel-icon.js +0 -1
- package/components/popover.d.ts +1 -1
- package/components/popover.js +66 -64
- package/components/progress-circle.js +36 -32
- package/components/progress.js +28 -24
- package/components/radio.js +59 -49
- package/components/resizable-panel.js +1 -1
- package/components/reveal.d.ts +2 -2
- package/components/ripple.d.ts +3 -3
- package/components/scroll-area.js +17 -16
- package/components/segmented.js +26 -26
- package/components/select.d.ts +2 -0
- package/components/select.js +61 -57
- package/components/setting-row.js +45 -42
- package/components/sidebar.js +131 -127
- package/components/skeleton.js +5 -5
- package/components/spinner.d.ts +13 -4
- package/components/spinner.js +42 -42
- package/components/stepper.js +21 -21
- package/components/switch.js +41 -39
- package/components/table.d.ts +9 -0
- package/components/table.js +370 -247
- package/components/tabs.js +149 -137
- package/components/toast.js +66 -66
- package/components/tooltip.js +2 -2
- package/components/tree.js +62 -51
- package/components/typography.d.ts +2 -1
- package/components/typography.js +33 -32
- package/components/ui/button.d.ts +2 -2
- package/components/ui/button.js +19 -19
- package/components/ui/collapsible.d.ts +1 -5
- package/components/ui/dialog.d.ts +3 -3
- package/components/ui/dialog.js +95 -58
- package/components/ui/tooltip.d.ts +2 -2
- package/components/ui/tooltip.js +67 -33
- package/components/viz-charts.js +95 -95
- package/demo/components/add-to-artifact.js +341 -0
- package/demo/lib/artifact-library.js +134 -0
- package/fonts/aribau-grotesk-medium.woff2 +0 -0
- package/fonts/aribau-grotesk-regular.woff2 +0 -0
- package/fonts.css +11 -11
- package/hooks/agents-ui/use-agent-audio-visualizer-aura.js +17 -16
- package/hooks/agents-ui/use-agent-audio-visualizer-wave.js +21 -20
- package/lib/icons.d.ts +4 -0
- package/lib/icons.js +103 -102
- package/lib/motion.d.ts +42 -39
- package/lib/motion.js +112 -52
- package/lib/spinner-mark.d.ts +9 -0
- package/lib/spinner-mark.js +98 -0
- package/llms.txt +52 -18
- package/manifest.json +240 -31
- package/package.json +1 -1
- package/styles.css +143 -124
- package/theme.css +90 -93
- package/components/ui/collapsible.js +0 -35
- package/fonts/aribau-grotesk-500.otf +0 -0
- package/fonts/aribau-grotesk-600.woff2 +0 -0
package/components/dropdown.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import * as
|
|
2
|
+
import { jsxs as L, jsx as v } from "react/jsx-runtime";
|
|
3
|
+
import * as s from "react";
|
|
4
4
|
import { createPortal as I } from "react-dom";
|
|
5
5
|
import { MotionConfig as P, AnimatePresence as z, motion as O } from "motion/react";
|
|
6
|
-
import { cn as
|
|
7
|
-
import {
|
|
6
|
+
import { cn as y } from "../lib/cn.js";
|
|
7
|
+
import { menuVariants as q } from "../lib/motion.js";
|
|
8
8
|
import { Ripple as $ } from "./ripple.js";
|
|
9
|
-
const
|
|
10
|
-
function
|
|
11
|
-
const t =
|
|
9
|
+
const C = (r, t) => `${r === "top" ? "bottom" : "top"} ${t === "start" ? "left" : "right"}`, N = s.createContext(null);
|
|
10
|
+
function k(r) {
|
|
11
|
+
const t = s.useContext(N);
|
|
12
12
|
if (!t)
|
|
13
13
|
throw new Error(`${r} must be used within a <Dropdown>.`);
|
|
14
14
|
return t;
|
|
15
15
|
}
|
|
16
16
|
function U({ children: r, defaultOpen: t = !1 }) {
|
|
17
|
-
const [n,
|
|
18
|
-
return /* @__PURE__ */
|
|
17
|
+
const [n, u] = s.useState(t), l = s.useRef(null), p = s.useRef(null);
|
|
18
|
+
return /* @__PURE__ */ v(N.Provider, { value: { open: n, setOpen: u, triggerRef: l, contentRef: p }, children: r });
|
|
19
19
|
}
|
|
20
20
|
function V({ children: r }) {
|
|
21
|
-
const { open: t, setOpen: n, triggerRef:
|
|
22
|
-
return
|
|
23
|
-
ref:
|
|
21
|
+
const { open: t, setOpen: n, triggerRef: u } = k("DropdownTrigger"), l = r;
|
|
22
|
+
return s.cloneElement(l, {
|
|
23
|
+
ref: u,
|
|
24
24
|
"aria-expanded": t,
|
|
25
25
|
"aria-haspopup": "menu",
|
|
26
26
|
onClick: (p) => {
|
|
27
|
-
var
|
|
28
|
-
(
|
|
27
|
+
var b, a;
|
|
28
|
+
(a = (b = l.props).onClick) == null || a.call(b, p), n(!t);
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
}
|
|
@@ -33,78 +33,78 @@ function W({
|
|
|
33
33
|
className: r,
|
|
34
34
|
align: t = "start",
|
|
35
35
|
side: n = "bottom",
|
|
36
|
-
sideOffset:
|
|
37
|
-
autoFocusFirstItem:
|
|
36
|
+
sideOffset: u = 6,
|
|
37
|
+
autoFocusFirstItem: l = !1,
|
|
38
38
|
children: p,
|
|
39
|
-
...
|
|
39
|
+
...b
|
|
40
40
|
}) {
|
|
41
|
-
const { open:
|
|
42
|
-
|
|
43
|
-
if (!
|
|
44
|
-
const
|
|
45
|
-
if (!
|
|
41
|
+
const { open: a, setOpen: h, triggerRef: g, contentRef: c } = k("DropdownContent"), [f, m] = s.useState(null);
|
|
42
|
+
s.useLayoutEffect(() => {
|
|
43
|
+
if (!a) return;
|
|
44
|
+
const i = g.current;
|
|
45
|
+
if (!i) return;
|
|
46
46
|
const e = () => {
|
|
47
|
-
var
|
|
48
|
-
const o =
|
|
49
|
-
|
|
47
|
+
var x, D;
|
|
48
|
+
const o = i.getBoundingClientRect(), d = ((x = c.current) == null ? void 0 : x.offsetWidth) ?? 0, w = ((D = c.current) == null ? void 0 : D.offsetHeight) ?? 0, E = t === "end" ? o.right - d : o.left, R = n === "top" ? o.top - w - u : o.bottom + u;
|
|
49
|
+
m({ top: R, left: E });
|
|
50
50
|
};
|
|
51
51
|
return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
|
|
52
52
|
window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
|
|
53
53
|
};
|
|
54
|
-
}, [
|
|
55
|
-
if (!
|
|
56
|
-
const
|
|
54
|
+
}, [a, t, n, u, g, c]), s.useEffect(() => {
|
|
55
|
+
if (!a) return;
|
|
56
|
+
const i = requestAnimationFrame(() => {
|
|
57
57
|
var e, o;
|
|
58
|
-
if (
|
|
59
|
-
const
|
|
58
|
+
if (l) {
|
|
59
|
+
const d = (e = c.current) == null ? void 0 : e.querySelector(
|
|
60
60
|
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
61
61
|
);
|
|
62
|
-
|
|
62
|
+
d == null || d.focus();
|
|
63
63
|
} else
|
|
64
|
-
(o =
|
|
64
|
+
(o = c.current) == null || o.focus();
|
|
65
65
|
});
|
|
66
|
-
return () => cancelAnimationFrame(
|
|
67
|
-
}, [
|
|
68
|
-
if (!
|
|
69
|
-
const
|
|
70
|
-
var
|
|
66
|
+
return () => cancelAnimationFrame(i);
|
|
67
|
+
}, [a, l, c]), s.useEffect(() => {
|
|
68
|
+
if (!a) return;
|
|
69
|
+
const i = (e) => {
|
|
70
|
+
var d, w;
|
|
71
71
|
const o = e.target;
|
|
72
|
-
(
|
|
72
|
+
(d = c.current) != null && d.contains(o) || (w = g.current) != null && w.contains(o) || h(!1);
|
|
73
73
|
};
|
|
74
|
-
return document.addEventListener("pointerdown",
|
|
75
|
-
}, [
|
|
76
|
-
const A = (
|
|
77
|
-
var
|
|
74
|
+
return document.addEventListener("pointerdown", i), () => document.removeEventListener("pointerdown", i);
|
|
75
|
+
}, [a, h, g, c]);
|
|
76
|
+
const A = (i) => {
|
|
77
|
+
var d, w, E, R, x, D;
|
|
78
78
|
const e = Array.from(
|
|
79
|
-
((
|
|
79
|
+
((d = c.current) == null ? void 0 : d.querySelectorAll(
|
|
80
80
|
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
81
81
|
)) ?? []
|
|
82
82
|
);
|
|
83
83
|
if (e.length === 0) return;
|
|
84
84
|
const o = e.indexOf(document.activeElement);
|
|
85
|
-
switch (
|
|
85
|
+
switch (i.key) {
|
|
86
86
|
case "Escape":
|
|
87
|
-
|
|
87
|
+
i.preventDefault(), h(!1), (w = g.current) == null || w.focus();
|
|
88
88
|
break;
|
|
89
89
|
case "ArrowDown":
|
|
90
|
-
|
|
90
|
+
i.preventDefault(), (E = e[o < 0 ? 0 : (o + 1) % e.length]) == null || E.focus();
|
|
91
91
|
break;
|
|
92
92
|
case "ArrowUp":
|
|
93
|
-
|
|
93
|
+
i.preventDefault(), (R = e[o < 0 ? e.length - 1 : (o - 1 + e.length) % e.length]) == null || R.focus();
|
|
94
94
|
break;
|
|
95
95
|
case "Home":
|
|
96
|
-
|
|
96
|
+
i.preventDefault(), (x = e[0]) == null || x.focus();
|
|
97
97
|
break;
|
|
98
98
|
case "End":
|
|
99
|
-
|
|
99
|
+
i.preventDefault(), (D = e[e.length - 1]) == null || D.focus();
|
|
100
100
|
break;
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
103
|
return I(
|
|
104
|
-
/* @__PURE__ */
|
|
104
|
+
/* @__PURE__ */ v(P, { reducedMotion: "user", children: /* @__PURE__ */ v(z, { children: a && /* @__PURE__ */ L(
|
|
105
105
|
O.div,
|
|
106
106
|
{
|
|
107
|
-
ref:
|
|
107
|
+
ref: c,
|
|
108
108
|
role: "menu",
|
|
109
109
|
tabIndex: -1,
|
|
110
110
|
onKeyDown: A,
|
|
@@ -114,19 +114,19 @@ function W({
|
|
|
114
114
|
exit: "hidden",
|
|
115
115
|
style: {
|
|
116
116
|
position: "fixed",
|
|
117
|
-
top: (
|
|
118
|
-
left: (
|
|
119
|
-
visibility:
|
|
120
|
-
transformOrigin:
|
|
117
|
+
top: (f == null ? void 0 : f.top) ?? 0,
|
|
118
|
+
left: (f == null ? void 0 : f.left) ?? 0,
|
|
119
|
+
visibility: f ? "visible" : "hidden",
|
|
120
|
+
transformOrigin: C(n, t)
|
|
121
121
|
},
|
|
122
|
-
className:
|
|
122
|
+
className: y(
|
|
123
123
|
"relative z-50 min-w-44 rounded-lg border border-border bg-elevated p-1",
|
|
124
124
|
"text-foreground shadow-elevation outline-none",
|
|
125
125
|
r
|
|
126
126
|
),
|
|
127
|
-
...
|
|
127
|
+
...b,
|
|
128
128
|
children: [
|
|
129
|
-
/* @__PURE__ */
|
|
129
|
+
/* @__PURE__ */ v($, { origin: C(n, t) }),
|
|
130
130
|
p
|
|
131
131
|
]
|
|
132
132
|
}
|
|
@@ -134,57 +134,66 @@ function W({
|
|
|
134
134
|
document.body
|
|
135
135
|
);
|
|
136
136
|
}
|
|
137
|
-
const j =
|
|
138
|
-
({
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
137
|
+
const j = s.forwardRef(
|
|
138
|
+
({
|
|
139
|
+
className: r,
|
|
140
|
+
startContent: t,
|
|
141
|
+
danger: n,
|
|
142
|
+
disabled: u,
|
|
143
|
+
restoreFocus: l = !0,
|
|
144
|
+
onSelect: p,
|
|
145
|
+
children: b,
|
|
146
|
+
...a
|
|
147
|
+
}, h) => {
|
|
148
|
+
const { setOpen: g, triggerRef: c } = k("DropdownItem"), f = () => {
|
|
149
|
+
var m;
|
|
150
|
+
u || (p == null || p(), g(!1), l && ((m = c.current) == null || m.focus()));
|
|
142
151
|
};
|
|
143
|
-
return /* @__PURE__ */
|
|
152
|
+
return /* @__PURE__ */ L(
|
|
144
153
|
"div",
|
|
145
154
|
{
|
|
146
|
-
ref:
|
|
155
|
+
ref: h,
|
|
147
156
|
role: "menuitem",
|
|
148
157
|
tabIndex: -1,
|
|
149
|
-
"aria-disabled":
|
|
150
|
-
onClick:
|
|
151
|
-
onKeyDown: (
|
|
152
|
-
(
|
|
158
|
+
"aria-disabled": u || void 0,
|
|
159
|
+
onClick: f,
|
|
160
|
+
onKeyDown: (m) => {
|
|
161
|
+
(m.key === "Enter" || m.key === " ") && (m.preventDefault(), f());
|
|
153
162
|
},
|
|
154
|
-
className:
|
|
155
|
-
"flex cursor-default items-center gap-2 rounded-
|
|
156
|
-
"outline-none transition-colors duration-
|
|
163
|
+
className: y(
|
|
164
|
+
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs",
|
|
165
|
+
"outline-none transition-colors duration-150",
|
|
157
166
|
"focus-visible:ring-3 focus-visible:ring-ring",
|
|
158
167
|
n ? "text-danger" : "text-foreground",
|
|
159
|
-
|
|
168
|
+
u ? "pointer-events-none opacity-50" : y("hover:bg-muted focus:bg-muted", n && "hover:bg-danger/10 focus:bg-danger/10"),
|
|
160
169
|
"[&_svg]:size-4 [&_svg]:shrink-0",
|
|
161
170
|
r
|
|
162
171
|
),
|
|
163
|
-
...
|
|
172
|
+
...a,
|
|
164
173
|
children: [
|
|
165
174
|
t,
|
|
166
|
-
/* @__PURE__ */
|
|
175
|
+
/* @__PURE__ */ v("span", { className: "flex-1", children: b })
|
|
167
176
|
]
|
|
168
177
|
}
|
|
169
178
|
);
|
|
170
179
|
}
|
|
171
180
|
);
|
|
172
181
|
j.displayName = "DropdownItem";
|
|
173
|
-
const H =
|
|
182
|
+
const H = s.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ v(
|
|
174
183
|
"div",
|
|
175
184
|
{
|
|
176
185
|
ref: n,
|
|
177
186
|
role: "separator",
|
|
178
|
-
className:
|
|
187
|
+
className: y("my-1 h-px bg-border", r),
|
|
179
188
|
...t
|
|
180
189
|
}
|
|
181
190
|
));
|
|
182
191
|
H.displayName = "DropdownSeparator";
|
|
183
|
-
const K =
|
|
192
|
+
const K = s.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ v(
|
|
184
193
|
"div",
|
|
185
194
|
{
|
|
186
195
|
ref: n,
|
|
187
|
-
className:
|
|
196
|
+
className: y(
|
|
188
197
|
"px-2 py-1.5 text-xs font-normal text-muted-foreground select-none",
|
|
189
198
|
r
|
|
190
199
|
),
|
|
@@ -9,7 +9,7 @@ import * as React from "react";
|
|
|
9
9
|
*
|
|
10
10
|
* Pass one or the other; `illustration` wins when both are present. The
|
|
11
11
|
* built-in illustrations (`EmptyDocuments`, `EmptySearch`, `EmptyConnections`,
|
|
12
|
-
* `EmptyInsights`) share one soft language —
|
|
12
|
+
* `EmptyInsights`) share one soft language — neutral-gray cards, a single ink
|
|
13
13
|
* accent — and re-theme with the system since every fill flows from a token.
|
|
14
14
|
*/
|
|
15
15
|
export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
@@ -23,7 +23,7 @@ const g = x.forwardRef(
|
|
|
23
23
|
"p",
|
|
24
24
|
{
|
|
25
25
|
className: s(
|
|
26
|
-
l ? "text-lg font-
|
|
26
|
+
l ? "text-lg font-medium text-foreground" : "font-normal"
|
|
27
27
|
),
|
|
28
28
|
children: n
|
|
29
29
|
}
|
|
@@ -126,7 +126,7 @@ function N({ className: r }) {
|
|
|
126
126
|
] });
|
|
127
127
|
}
|
|
128
128
|
N.displayName = "EmptySearch";
|
|
129
|
-
function
|
|
129
|
+
function u({ className: r }) {
|
|
130
130
|
return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
|
|
131
131
|
/* @__PURE__ */ e(
|
|
132
132
|
"path",
|
|
@@ -153,8 +153,8 @@ function p({ className: r }) {
|
|
|
153
153
|
)
|
|
154
154
|
] });
|
|
155
155
|
}
|
|
156
|
-
|
|
157
|
-
function
|
|
156
|
+
u.displayName = "EmptyConnections";
|
|
157
|
+
function p({ className: r }) {
|
|
158
158
|
return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
|
|
159
159
|
/* @__PURE__ */ e("rect", { x: "34", y: "88", width: "72", height: "3", rx: "1.5", className: "fill-border-strong" }),
|
|
160
160
|
/* @__PURE__ */ e("rect", { x: "40", y: "64", width: "15", height: "24", rx: "3", className: "fill-muted" }),
|
|
@@ -162,11 +162,11 @@ function u({ className: r }) {
|
|
|
162
162
|
/* @__PURE__ */ e("rect", { x: "84", y: "34", width: "15", height: "54", rx: "3", className: "fill-brand" })
|
|
163
163
|
] });
|
|
164
164
|
}
|
|
165
|
-
|
|
165
|
+
p.displayName = "EmptyInsights";
|
|
166
166
|
export {
|
|
167
|
-
|
|
167
|
+
u as EmptyConnections,
|
|
168
168
|
y as EmptyDocuments,
|
|
169
|
-
|
|
169
|
+
p as EmptyInsights,
|
|
170
170
|
N as EmptySearch,
|
|
171
171
|
g as EmptyState
|
|
172
172
|
};
|
package/components/field.d.ts
CHANGED
|
@@ -15,6 +15,10 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
15
15
|
error?: React.ReactNode;
|
|
16
16
|
required?: boolean;
|
|
17
17
|
htmlFor?: string;
|
|
18
|
+
/** id put on the rendered error text, so the control can aria-describedby it. */
|
|
19
|
+
errorId?: string;
|
|
20
|
+
/** id put on the rendered description text, for the same wiring. */
|
|
21
|
+
descriptionId?: string;
|
|
18
22
|
}
|
|
19
23
|
/** Vertical stack: label · control · (description|error). */
|
|
20
24
|
export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
|
package/components/field.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import * as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { interactive as
|
|
6
|
-
const
|
|
2
|
+
import { jsxs as v, jsx as a } from "react/jsx-runtime";
|
|
3
|
+
import * as r from "react";
|
|
4
|
+
import { cn as i } from "../lib/cn.js";
|
|
5
|
+
import { interactive as R } from "../lib/interactive.js";
|
|
6
|
+
const L = i(
|
|
7
7
|
// Border WIDTH only — no border-color utility. ads-interactive owns the
|
|
8
8
|
// color (rest = --glow-border-rest below); a `border-input` utility here
|
|
9
9
|
// would out-cascade the hover/focus brand-black rules.
|
|
@@ -16,59 +16,70 @@ const h = a(
|
|
|
16
16
|
// hover/focus snap the border to solid brand-black (no halo). The inner
|
|
17
17
|
// glow is a whisper of inset depth so the writing surface reads recessed —
|
|
18
18
|
// carried through every interactive state by the --glow-inset hook.
|
|
19
|
-
|
|
19
|
+
R({ on: "all", color: "brand", intensity: "medium", animate: !0 }),
|
|
20
20
|
"[--glow-border-rest:var(--input)]",
|
|
21
21
|
"[--glow-inset:var(--inner-glow-field)]"
|
|
22
|
-
),
|
|
22
|
+
), g = r.forwardRef(({ className: t, children: e, required: o, ...l }, n) => /* @__PURE__ */ v(
|
|
23
23
|
"label",
|
|
24
24
|
{
|
|
25
25
|
ref: n,
|
|
26
|
-
className:
|
|
26
|
+
className: i(
|
|
27
27
|
"flex items-center gap-1 text-xs font-normal text-foreground select-none",
|
|
28
28
|
"peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
|
|
29
|
-
|
|
29
|
+
t
|
|
30
30
|
),
|
|
31
|
-
...
|
|
31
|
+
...l,
|
|
32
32
|
children: [
|
|
33
33
|
e,
|
|
34
|
-
|
|
34
|
+
o && /* @__PURE__ */ a("span", { className: "text-danger", children: "*" })
|
|
35
35
|
]
|
|
36
36
|
}
|
|
37
37
|
));
|
|
38
|
-
|
|
39
|
-
const
|
|
38
|
+
g.displayName = "Label";
|
|
39
|
+
const w = r.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ a(
|
|
40
40
|
"p",
|
|
41
41
|
{
|
|
42
|
-
ref:
|
|
43
|
-
className:
|
|
42
|
+
ref: o,
|
|
43
|
+
className: i("text-xs text-muted-foreground", t),
|
|
44
44
|
...e
|
|
45
45
|
}
|
|
46
46
|
));
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
({ className:
|
|
47
|
+
w.displayName = "FieldDescription";
|
|
48
|
+
const y = r.forwardRef(
|
|
49
|
+
({ className: t, children: e, ...o }, l) => e ? /* @__PURE__ */ a(
|
|
50
50
|
"p",
|
|
51
51
|
{
|
|
52
|
-
ref:
|
|
53
|
-
className:
|
|
54
|
-
...
|
|
52
|
+
ref: l,
|
|
53
|
+
className: i("text-xs font-normal text-danger", t),
|
|
54
|
+
...o,
|
|
55
55
|
children: e
|
|
56
56
|
}
|
|
57
57
|
) : null
|
|
58
58
|
);
|
|
59
|
-
|
|
60
|
-
const
|
|
61
|
-
({ className:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
y.displayName = "FieldError";
|
|
60
|
+
const D = r.forwardRef(
|
|
61
|
+
({ className: t, label: e, description: o, error: l, required: n, htmlFor: N, errorId: s, descriptionId: c, children: d, ...F }, h) => {
|
|
62
|
+
const m = r.useId(), f = s ?? `${m}-error`, p = c ?? `${m}-description`, u = l ? f : o ? p : void 0, E = s == null && c == null;
|
|
63
|
+
let x = d;
|
|
64
|
+
if (E && u && r.isValidElement(d)) {
|
|
65
|
+
const b = d.props;
|
|
66
|
+
x = r.cloneElement(d, {
|
|
67
|
+
"aria-describedby": [b["aria-describedby"], u].filter(Boolean).join(" ") || void 0,
|
|
68
|
+
"aria-invalid": b["aria-invalid"] ?? (l ? !0 : void 0)
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
return /* @__PURE__ */ v("div", { ref: h, className: i("flex flex-col gap-1.5", t), ...F, children: [
|
|
72
|
+
e && /* @__PURE__ */ a(g, { htmlFor: N, required: n, children: e }),
|
|
73
|
+
x,
|
|
74
|
+
l ? /* @__PURE__ */ a(y, { id: f, children: l }) : o ? /* @__PURE__ */ a(w, { id: p, children: o }) : null
|
|
75
|
+
] });
|
|
76
|
+
}
|
|
66
77
|
);
|
|
67
|
-
|
|
78
|
+
D.displayName = "Field";
|
|
68
79
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
D as Field,
|
|
81
|
+
w as FieldDescription,
|
|
82
|
+
y as FieldError,
|
|
83
|
+
g as Label,
|
|
84
|
+
L as inputBaseClass
|
|
74
85
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as a, jsx as r, Fragment as f } from "react/jsx-runtime";
|
|
3
3
|
import * as i from "react";
|
|
4
4
|
import { cva as C } from "class-variance-authority";
|
|
5
5
|
import { cn as v } from "../lib/cn.js";
|
|
@@ -9,9 +9,9 @@ const T = C(
|
|
|
9
9
|
v(
|
|
10
10
|
"flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl px-6 py-8 text-center",
|
|
11
11
|
"border-2 border-dashed border-border-strong bg-surface outline-none",
|
|
12
|
-
"transition-[background-color,border-color,transform] duration-
|
|
12
|
+
"transition-[background-color,border-color,transform] duration-150 ease-out",
|
|
13
13
|
"hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
|
|
14
|
-
"active:scale-
|
|
14
|
+
"active:scale-[0.97] motion-reduce:transition-none"
|
|
15
15
|
),
|
|
16
16
|
{
|
|
17
17
|
variants: {
|
|
@@ -26,9 +26,9 @@ const T = C(
|
|
|
26
26
|
},
|
|
27
27
|
defaultVariants: { isDragging: !1, isDisabled: !1 }
|
|
28
28
|
}
|
|
29
|
-
), j = (
|
|
29
|
+
), j = (t) => t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${Math.round(t / 1024)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`, $ = i.forwardRef(
|
|
30
30
|
({
|
|
31
|
-
className:
|
|
31
|
+
className: t,
|
|
32
32
|
accept: b,
|
|
33
33
|
multiple: c = !1,
|
|
34
34
|
disabled: n = !1,
|
|
@@ -45,7 +45,7 @@ const T = C(
|
|
|
45
45
|
var e;
|
|
46
46
|
return (e = m.current) == null ? void 0 : e.click();
|
|
47
47
|
}, k = !!(s != null && s.length);
|
|
48
|
-
return /* @__PURE__ */
|
|
48
|
+
return /* @__PURE__ */ a(
|
|
49
49
|
"div",
|
|
50
50
|
{
|
|
51
51
|
ref: z,
|
|
@@ -70,7 +70,7 @@ const T = C(
|
|
|
70
70
|
},
|
|
71
71
|
className: v(
|
|
72
72
|
T({ isDragging: h, isDisabled: n }),
|
|
73
|
-
|
|
73
|
+
t
|
|
74
74
|
),
|
|
75
75
|
...y,
|
|
76
76
|
children: [
|
|
@@ -88,13 +88,13 @@ const T = C(
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
),
|
|
91
|
-
k ? /* @__PURE__ */
|
|
91
|
+
k ? /* @__PURE__ */ a(f, { children: [
|
|
92
92
|
/* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(R, {}) }),
|
|
93
|
-
/* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s.map((e) => /* @__PURE__ */
|
|
93
|
+
/* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s.map((e) => /* @__PURE__ */ a("span", { className: "text-base text-foreground", children: [
|
|
94
94
|
e.name,
|
|
95
95
|
/* @__PURE__ */ r("span", { className: "ml-2 text-xs text-tertiary tabular-nums", children: j(e.size) })
|
|
96
96
|
] }, e.name)) }),
|
|
97
|
-
/* @__PURE__ */
|
|
97
|
+
/* @__PURE__ */ a("div", { className: "mt-1 flex items-center gap-2", children: [
|
|
98
98
|
/* @__PURE__ */ r(D, { size: "sm", variant: "secondary", onClick: (e) => {
|
|
99
99
|
e.stopPropagation(), u();
|
|
100
100
|
}, children: "Replace" }),
|
|
@@ -111,9 +111,9 @@ const T = C(
|
|
|
111
111
|
}
|
|
112
112
|
)
|
|
113
113
|
] })
|
|
114
|
-
] }) : /* @__PURE__ */
|
|
114
|
+
] }) : /* @__PURE__ */ a(f, { children: [
|
|
115
115
|
/* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(w, {}) }),
|
|
116
|
-
/* @__PURE__ */ r("span", { className: "text-base text-foreground", children: N ?? /* @__PURE__ */
|
|
116
|
+
/* @__PURE__ */ r("span", { className: "text-base text-foreground", children: N ?? /* @__PURE__ */ a(f, { children: [
|
|
117
117
|
"Drop ",
|
|
118
118
|
c ? "files" : "a file",
|
|
119
119
|
" here, or",
|
package/components/index.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export { cn } from '../lib/cn';
|
|
2
2
|
export { interactive, type InteractiveProps } from '../lib/interactive';
|
|
3
|
+
export { springEffect, springControl, springOverlay, springDialog, springSheet, springDisclosure, springHighlight, springProgress } from '../lib/motion';
|
|
4
|
+
export { springSwitch, springRadio, springCarousel, springSidebar, checkDrawTransition, fadeTransition } from '../lib/motion';
|
|
5
|
+
export { floatVariants, tooltipVariants, menuVariants, modalPanelVariants, backdropVariants, drawerBackdropVariants, drawerOffset, screenVariants, toastVariants } from '../lib/motion';
|
|
3
6
|
export { TooltipProvider } from './ui/tooltip';
|
|
4
7
|
export * from './button';
|
|
5
8
|
export * from './spinner';
|