@actioneer/ads 0.5.7 → 0.5.9
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.d.ts +1 -0
- package/components/avatar.js +27 -26
- package/components/badge.d.ts +1 -1
- package/components/breadcrumbs.d.ts +2 -0
- package/components/breadcrumbs.js +52 -50
- 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.d.ts +6 -0
- package/components/chart.js +743 -672
- 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 +18 -11
- package/components/drawer.js +81 -78
- 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.d.ts +5 -1
- package/components/modal.js +121 -76
- 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.d.ts +4 -0
- package/components/pixel-icon.js +210 -164
- 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.d.ts +1 -0
- package/components/segmented.js +39 -36
- package/components/select.d.ts +7 -0
- package/components/select.js +186 -137
- 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 +16 -0
- package/components/table.js +393 -260
- 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 +363 -0
- package/demo/lib/artifact-library.js +142 -0
- package/demo/lib/artifact-pin-guard.js +12 -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 +24 -0
- package/lib/icons.js +114 -108
- 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 +53 -19
- package/manifest.json +258 -36
- 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
|
@@ -1,91 +1,96 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as e, jsxs as
|
|
2
|
+
import { jsx as e, jsxs as _ } from "react/jsx-runtime";
|
|
3
3
|
import * as a from "react";
|
|
4
|
-
import { cn as
|
|
5
|
-
import { EyeOff as
|
|
6
|
-
import { inputBaseClass as
|
|
7
|
-
const
|
|
4
|
+
import { cn as $ } from "../lib/cn.js";
|
|
5
|
+
import { EyeOff as C, Eye as H } from "../lib/icons.js";
|
|
6
|
+
import { inputBaseClass as O, Field as A } from "./field.js";
|
|
7
|
+
const D = {
|
|
8
8
|
sm: "h-8 text-xs",
|
|
9
9
|
md: "h-10 text-xs",
|
|
10
10
|
lg: "h-11 text-base"
|
|
11
|
-
},
|
|
11
|
+
}, G = a.forwardRef(
|
|
12
12
|
({
|
|
13
13
|
// Field props
|
|
14
14
|
label: l,
|
|
15
|
-
description:
|
|
15
|
+
description: r,
|
|
16
16
|
error: s,
|
|
17
17
|
required: c,
|
|
18
|
-
className:
|
|
18
|
+
className: N,
|
|
19
19
|
// Input props
|
|
20
|
-
id:
|
|
21
|
-
inputClassName:
|
|
22
|
-
size:
|
|
23
|
-
startContent:
|
|
24
|
-
endContent:
|
|
20
|
+
id: I,
|
|
21
|
+
inputClassName: z,
|
|
22
|
+
size: B = "md",
|
|
23
|
+
startContent: t,
|
|
24
|
+
endContent: E,
|
|
25
25
|
isInvalid: u,
|
|
26
26
|
type: f,
|
|
27
|
-
multiline:
|
|
28
|
-
rows:
|
|
27
|
+
multiline: n = !1,
|
|
28
|
+
rows: F,
|
|
29
|
+
"aria-describedby": j,
|
|
29
30
|
...p
|
|
30
31
|
}, m) => {
|
|
31
|
-
const
|
|
32
|
+
const R = a.useId(), o = I ?? R, x = `${o}-error`, g = `${o}-description`, v = [j, s ? x : r ? g : null].filter(Boolean).join(" ") || void 0, [d, k] = a.useState(!1), h = !n && f === "password", i = E ?? (h ? /* @__PURE__ */ e(
|
|
32
33
|
"button",
|
|
33
34
|
{
|
|
34
35
|
type: "button",
|
|
35
|
-
"aria-label":
|
|
36
|
-
onClick: () =>
|
|
36
|
+
"aria-label": d ? "Hide password" : "Show password",
|
|
37
|
+
onClick: () => k((S) => !S),
|
|
37
38
|
className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
|
|
38
|
-
children:
|
|
39
|
+
children: d ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(H, {})
|
|
39
40
|
}
|
|
40
|
-
) : void 0),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
),
|
|
41
|
+
) : void 0), b = $(
|
|
42
|
+
O,
|
|
43
|
+
n ? "min-h-20 resize-y py-2 text-xs" : D[B],
|
|
44
|
+
t && "pl-9",
|
|
45
|
+
i && "pr-9",
|
|
46
|
+
z
|
|
47
|
+
), y = n ? /* @__PURE__ */ e(
|
|
47
48
|
"textarea",
|
|
48
49
|
{
|
|
49
50
|
ref: m,
|
|
50
|
-
id:
|
|
51
|
-
rows:
|
|
51
|
+
id: o,
|
|
52
|
+
rows: F ?? 3,
|
|
52
53
|
"aria-invalid": u || !!s || void 0,
|
|
53
|
-
|
|
54
|
+
"aria-describedby": v,
|
|
55
|
+
className: b,
|
|
54
56
|
...p
|
|
55
57
|
}
|
|
56
58
|
) : /* @__PURE__ */ e(
|
|
57
59
|
"input",
|
|
58
60
|
{
|
|
59
61
|
ref: m,
|
|
60
|
-
id:
|
|
61
|
-
type:
|
|
62
|
+
id: o,
|
|
63
|
+
type: h && d ? "text" : f,
|
|
62
64
|
"aria-invalid": u || !!s || void 0,
|
|
63
|
-
|
|
65
|
+
"aria-describedby": v,
|
|
66
|
+
className: b,
|
|
64
67
|
...p
|
|
65
68
|
}
|
|
66
|
-
),
|
|
69
|
+
), w = t || i ? (
|
|
67
70
|
// group/field: adornment icons follow the field's interactive states.
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
/* @__PURE__ */ _("div", { className: "group/field relative w-full", children: [
|
|
72
|
+
t && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: t }),
|
|
73
|
+
y,
|
|
74
|
+
i && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: i })
|
|
72
75
|
] })
|
|
73
|
-
) :
|
|
74
|
-
return !l && !
|
|
75
|
-
|
|
76
|
+
) : y;
|
|
77
|
+
return !l && !r && !s && !c ? w : /* @__PURE__ */ e(
|
|
78
|
+
A,
|
|
76
79
|
{
|
|
77
80
|
label: l,
|
|
78
|
-
description:
|
|
81
|
+
description: r,
|
|
79
82
|
error: s,
|
|
80
83
|
required: c,
|
|
81
|
-
htmlFor:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
+
htmlFor: o,
|
|
85
|
+
errorId: x,
|
|
86
|
+
descriptionId: g,
|
|
87
|
+
className: N,
|
|
88
|
+
children: w
|
|
84
89
|
}
|
|
85
90
|
);
|
|
86
91
|
}
|
|
87
92
|
);
|
|
88
|
-
|
|
93
|
+
G.displayName = "InputField";
|
|
89
94
|
export {
|
|
90
|
-
|
|
95
|
+
G as InputField
|
|
91
96
|
};
|
package/components/input.js
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as e, jsxs as g } from "react/jsx-runtime";
|
|
3
|
-
import * as
|
|
3
|
+
import * as d from "react";
|
|
4
4
|
import { cn as v } from "../lib/cn.js";
|
|
5
5
|
import { EyeOff as h, Eye as w } from "../lib/icons.js";
|
|
6
6
|
import { inputBaseClass as b } from "./field.js";
|
|
7
7
|
const y = {
|
|
8
|
-
sm: "h-8 text-xs",
|
|
9
|
-
md: "h-10 text-xs",
|
|
10
|
-
lg: "h-11 text-base"
|
|
11
|
-
}, N =
|
|
8
|
+
sm: "h-8 rounded-sm text-xs",
|
|
9
|
+
md: "h-10 rounded-md text-xs",
|
|
10
|
+
lg: "h-11 rounded-md text-base"
|
|
11
|
+
}, N = d.forwardRef(
|
|
12
12
|
({
|
|
13
|
-
className:
|
|
14
|
-
size:
|
|
13
|
+
className: l,
|
|
14
|
+
size: a = "md",
|
|
15
15
|
startContent: o,
|
|
16
16
|
endContent: u,
|
|
17
17
|
isInvalid: f,
|
|
18
18
|
type: t,
|
|
19
19
|
...c
|
|
20
|
-
},
|
|
21
|
-
const [
|
|
20
|
+
}, m) => {
|
|
21
|
+
const [s, p] = d.useState(!1), i = t === "password", r = u ?? (i ? /* @__PURE__ */ e(
|
|
22
22
|
"button",
|
|
23
23
|
{
|
|
24
24
|
type: "button",
|
|
25
|
-
"aria-label":
|
|
26
|
-
onClick: () =>
|
|
25
|
+
"aria-label": s ? "Hide password" : "Show password",
|
|
26
|
+
onClick: () => p((x) => !x),
|
|
27
27
|
className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
|
|
28
|
-
children:
|
|
28
|
+
children: s ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(w, {})
|
|
29
29
|
}
|
|
30
30
|
) : void 0), n = /* @__PURE__ */ e(
|
|
31
31
|
"input",
|
|
32
32
|
{
|
|
33
|
-
ref:
|
|
34
|
-
type: i &&
|
|
33
|
+
ref: m,
|
|
34
|
+
type: i && s ? "text" : t,
|
|
35
35
|
"aria-invalid": f || void 0,
|
|
36
36
|
className: v(
|
|
37
37
|
b,
|
|
38
|
-
y[
|
|
38
|
+
y[a],
|
|
39
39
|
o && "pl-9",
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
r && "pr-9",
|
|
41
|
+
l
|
|
42
42
|
),
|
|
43
43
|
...c
|
|
44
44
|
}
|
|
45
45
|
);
|
|
46
|
-
return !o && !
|
|
46
|
+
return !o && !r ? n : (
|
|
47
47
|
// group/field: adornment icons follow the field's interactive states —
|
|
48
48
|
// muted at rest, full black while hovered/focused (same signal as the
|
|
49
49
|
// border snapping to brand).
|
|
50
50
|
/* @__PURE__ */ g("div", { className: "group/field relative w-full", children: [
|
|
51
|
-
o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-
|
|
51
|
+
o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
|
|
52
52
|
n,
|
|
53
|
-
|
|
53
|
+
r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: r })
|
|
54
54
|
] })
|
|
55
55
|
);
|
|
56
56
|
}
|
package/components/link.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as r, jsx as o } from "react/jsx-runtime";
|
|
3
3
|
import * as u from "react";
|
|
4
4
|
import { ArrowUpRight as t } from "../lib/icons.js";
|
|
5
5
|
import { cn as d } from "../lib/cn.js";
|
|
@@ -8,17 +8,17 @@ const c = {
|
|
|
8
8
|
muted: "text-muted-foreground",
|
|
9
9
|
primary: "text-brand"
|
|
10
10
|
}, f = u.forwardRef(
|
|
11
|
-
({ className: n, color: a = "default", isExternal:
|
|
11
|
+
({ className: n, color: a = "default", isExternal: e = !1, children: i, ...s }, l) => /* @__PURE__ */ r(
|
|
12
12
|
"a",
|
|
13
13
|
{
|
|
14
14
|
ref: l,
|
|
15
|
-
target:
|
|
16
|
-
rel:
|
|
15
|
+
target: e ? "_blank" : void 0,
|
|
16
|
+
rel: e ? "noopener noreferrer" : void 0,
|
|
17
17
|
className: d(
|
|
18
18
|
// Links read as links by WEIGHT at rest (bold against body copy);
|
|
19
19
|
// the underline is a hover/focus affordance. Underline spec: dotted,
|
|
20
20
|
// 12% thickness, 24% offset, skip-ink, auto (current) color.
|
|
21
|
-
"group/link inline-flex items-center gap-1 rounded-xs font-
|
|
21
|
+
"group/link inline-flex items-center gap-1 rounded-xs font-medium",
|
|
22
22
|
"hover:underline focus-visible:underline decoration-dotted decoration-[0.12em] underline-offset-[0.24em]",
|
|
23
23
|
"outline-none focus-visible:ring-3 focus-visible:ring-ring",
|
|
24
24
|
c[a],
|
|
@@ -27,7 +27,7 @@ const c = {
|
|
|
27
27
|
...s,
|
|
28
28
|
children: [
|
|
29
29
|
i,
|
|
30
|
-
|
|
30
|
+
e && // Two arrows stacked in a clipped box, driven by a single group-hover
|
|
31
31
|
// CSS var (`--arrow-out`). At rest, arrow A sits centered and arrow B
|
|
32
32
|
// is parked bottom-left off the viewport (--arrow-out = 0). On hover,
|
|
33
33
|
// --arrow-out = 1: A slides up-right out of the frame, B slides in to
|
|
@@ -35,7 +35,7 @@ const c = {
|
|
|
35
35
|
// destination. Space is reserved so the label never shifts.
|
|
36
36
|
// (Inline style — Tailwind's arbitrary translate utilities weren't
|
|
37
37
|
// being generated by the JIT for these specific values.)
|
|
38
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ r(
|
|
39
39
|
"span",
|
|
40
40
|
{
|
|
41
41
|
"aria-hidden": !0,
|
|
@@ -44,7 +44,7 @@ const c = {
|
|
|
44
44
|
/* @__PURE__ */ o(
|
|
45
45
|
t,
|
|
46
46
|
{
|
|
47
|
-
className: "absolute inset-0 size-full transition-transform duration-
|
|
47
|
+
className: "absolute inset-0 size-full transition-transform duration-150 ease-out motion-reduce:transition-none",
|
|
48
48
|
style: {
|
|
49
49
|
transform: "translate(calc(var(--arrow-out) * 100%), calc(var(--arrow-out) * -100%))"
|
|
50
50
|
}
|
|
@@ -53,7 +53,7 @@ const c = {
|
|
|
53
53
|
/* @__PURE__ */ o(
|
|
54
54
|
t,
|
|
55
55
|
{
|
|
56
|
-
className: "absolute inset-0 size-full transition-transform duration-
|
|
56
|
+
className: "absolute inset-0 size-full transition-transform duration-150 ease-out motion-reduce:transition-none",
|
|
57
57
|
style: {
|
|
58
58
|
transform: "translate(calc((var(--arrow-out) - 1) * 100%), calc((1 - var(--arrow-out)) * 100%))"
|
|
59
59
|
}
|
package/components/modal.d.ts
CHANGED
|
@@ -8,8 +8,12 @@ export interface ModalProps extends VariantProps<typeof panelVariants> {
|
|
|
8
8
|
onOpenChange: (open: boolean) => void;
|
|
9
9
|
className?: string;
|
|
10
10
|
children: React.ReactNode;
|
|
11
|
+
showCloseButton?: boolean;
|
|
12
|
+
"aria-label"?: string;
|
|
13
|
+
"aria-labelledby"?: string;
|
|
14
|
+
"aria-describedby"?: string;
|
|
11
15
|
}
|
|
12
|
-
export declare function Modal({ open, onOpenChange, size, className, children }: ModalProps): React.ReactPortal;
|
|
16
|
+
export declare function Modal({ open, onOpenChange, size, className, children, showCloseButton, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.ReactPortal;
|
|
13
17
|
export declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
14
18
|
export declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
15
19
|
export declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
package/components/modal.js
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import * as
|
|
4
|
-
import { createPortal as
|
|
5
|
-
import { MotionConfig as
|
|
6
|
-
import { Close as
|
|
7
|
-
import { cva as
|
|
8
|
-
import { cn as
|
|
9
|
-
import { backdropVariants as
|
|
10
|
-
import { Ripple as
|
|
11
|
-
const
|
|
2
|
+
import { jsx as a, jsxs as y } from "react/jsx-runtime";
|
|
3
|
+
import * as n from "react";
|
|
4
|
+
import { createPortal as F } from "react-dom";
|
|
5
|
+
import { MotionConfig as j, AnimatePresence as z, motion as h } from "motion/react";
|
|
6
|
+
import { Close as P } from "../lib/icons.js";
|
|
7
|
+
import { cva as T } from "class-variance-authority";
|
|
8
|
+
import { cn as i } from "../lib/cn.js";
|
|
9
|
+
import { backdropVariants as V, modalPanelVariants as H } from "../lib/motion.js";
|
|
10
|
+
import { Ripple as L } from "./ripple.js";
|
|
11
|
+
const q = T(
|
|
12
12
|
[
|
|
13
13
|
"relative flex w-full flex-col",
|
|
14
|
+
// Cap height to the viewport and clip, so a tall modal scrolls its body
|
|
15
|
+
// (below) instead of pushing the footer's action off-screen.
|
|
16
|
+
"max-h-[calc(100dvh-2rem)] overflow-hidden",
|
|
14
17
|
"bg-elevated text-foreground",
|
|
15
18
|
"rounded-xl shadow-elevation"
|
|
16
19
|
],
|
|
@@ -26,72 +29,111 @@ const k = h(
|
|
|
26
29
|
defaultVariants: { size: "md" }
|
|
27
30
|
}
|
|
28
31
|
);
|
|
29
|
-
function
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
function Z({
|
|
33
|
+
open: o,
|
|
34
|
+
onOpenChange: t,
|
|
35
|
+
size: r,
|
|
36
|
+
className: g,
|
|
37
|
+
children: w,
|
|
38
|
+
showCloseButton: M = !0,
|
|
39
|
+
"aria-label": N,
|
|
40
|
+
"aria-labelledby": k,
|
|
41
|
+
"aria-describedby": R
|
|
42
|
+
}) {
|
|
43
|
+
const d = n.useRef(null), f = n.useRef(null), u = n.useRef(null);
|
|
44
|
+
return n.useEffect(() => {
|
|
32
45
|
if (!o) return;
|
|
33
|
-
|
|
34
|
-
const
|
|
46
|
+
u.current = document.activeElement;
|
|
47
|
+
const E = document.body.style.overflow;
|
|
35
48
|
document.body.style.overflow = "hidden";
|
|
36
|
-
const
|
|
37
|
-
|
|
49
|
+
const m = f.current, p = [];
|
|
50
|
+
if (m)
|
|
51
|
+
for (const e of Array.from(document.body.children))
|
|
52
|
+
e !== m && e instanceof HTMLElement && !e.inert && (e.inert = !0, p.push(e));
|
|
53
|
+
const A = () => {
|
|
54
|
+
var e;
|
|
55
|
+
return Array.from(
|
|
56
|
+
((e = d.current) == null ? void 0 : e.querySelectorAll(
|
|
57
|
+
'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])'
|
|
58
|
+
)) ?? []
|
|
59
|
+
);
|
|
60
|
+
}, b = (e) => {
|
|
61
|
+
if (e.key === "Escape") {
|
|
62
|
+
e.stopPropagation(), t(!1);
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (e.key !== "Tab") return;
|
|
66
|
+
const l = d.current;
|
|
67
|
+
if (!l) return;
|
|
68
|
+
const s = A();
|
|
69
|
+
if (s.length === 0) {
|
|
70
|
+
e.preventDefault(), l.focus();
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const x = s[0], v = s[s.length - 1], c = document.activeElement;
|
|
74
|
+
e.shiftKey ? (c === x || c === l) && (e.preventDefault(), v.focus()) : c === v && (e.preventDefault(), x.focus());
|
|
38
75
|
};
|
|
39
|
-
document.addEventListener("keydown",
|
|
40
|
-
const
|
|
41
|
-
var
|
|
42
|
-
(
|
|
76
|
+
document.addEventListener("keydown", b);
|
|
77
|
+
const D = requestAnimationFrame(() => {
|
|
78
|
+
var e;
|
|
79
|
+
(e = d.current) == null || e.focus();
|
|
43
80
|
});
|
|
44
81
|
return () => {
|
|
45
|
-
var
|
|
46
|
-
document.removeEventListener("keydown",
|
|
82
|
+
var e, l;
|
|
83
|
+
document.removeEventListener("keydown", b), document.body.style.overflow = E;
|
|
84
|
+
for (const s of p) s.inert = !1;
|
|
85
|
+
cancelAnimationFrame(D), (l = (e = u.current) == null ? void 0 : e.focus) == null || l.call(e);
|
|
47
86
|
};
|
|
48
|
-
}, [o,
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
|
|
87
|
+
}, [o, t]), F(
|
|
88
|
+
/* @__PURE__ */ a(j, { reducedMotion: "user", children: /* @__PURE__ */ a(z, { children: o && /* @__PURE__ */ y("div", { ref: f, className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
|
|
89
|
+
/* @__PURE__ */ a(
|
|
90
|
+
h.div,
|
|
52
91
|
{
|
|
53
|
-
variants:
|
|
92
|
+
variants: V,
|
|
54
93
|
initial: "hidden",
|
|
55
94
|
animate: "visible",
|
|
56
95
|
exit: "hidden",
|
|
57
96
|
className: "absolute inset-0 bg-overlay",
|
|
58
|
-
onClick: () =>
|
|
97
|
+
onClick: () => t(!1),
|
|
59
98
|
"aria-hidden": !0
|
|
60
99
|
},
|
|
61
100
|
"backdrop"
|
|
62
101
|
),
|
|
63
|
-
/* @__PURE__ */
|
|
64
|
-
|
|
102
|
+
/* @__PURE__ */ y(
|
|
103
|
+
h.div,
|
|
65
104
|
{
|
|
66
|
-
ref:
|
|
67
|
-
variants:
|
|
105
|
+
ref: d,
|
|
106
|
+
variants: H,
|
|
68
107
|
initial: "hidden",
|
|
69
108
|
animate: "visible",
|
|
70
109
|
exit: "hidden",
|
|
71
110
|
role: "dialog",
|
|
72
111
|
"aria-modal": "true",
|
|
112
|
+
"aria-label": N,
|
|
113
|
+
"aria-labelledby": k,
|
|
114
|
+
"aria-describedby": R,
|
|
73
115
|
tabIndex: -1,
|
|
74
|
-
className:
|
|
116
|
+
className: i(q({ size: r }), "relative outline-none", g),
|
|
75
117
|
children: [
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ a(L, { origin: "center" }),
|
|
119
|
+
M ? /* @__PURE__ */ a(
|
|
78
120
|
"button",
|
|
79
121
|
{
|
|
80
122
|
type: "button",
|
|
81
|
-
onClick: () =>
|
|
123
|
+
onClick: () => t(!1),
|
|
82
124
|
"aria-label": "Close",
|
|
83
|
-
className:
|
|
125
|
+
className: i(
|
|
84
126
|
"absolute right-4 top-4 inline-flex size-8 items-center justify-center",
|
|
85
|
-
"rounded-
|
|
86
|
-
"transition-[background,color,transform] duration-
|
|
87
|
-
"active:scale-
|
|
127
|
+
"rounded-sm text-muted-foreground",
|
|
128
|
+
"transition-[background,color,transform] duration-150 ease-out motion-reduce:transition-none hover:bg-muted hover:text-foreground",
|
|
129
|
+
"active:scale-[0.97] motion-reduce:active:scale-100",
|
|
88
130
|
"outline-none focus-visible:ring-3 focus-visible:ring-ring",
|
|
89
131
|
"[&_svg]:size-4 [&_svg]:shrink-0"
|
|
90
132
|
),
|
|
91
|
-
children: /* @__PURE__ */
|
|
133
|
+
children: /* @__PURE__ */ a(P, { "aria-hidden": !0 })
|
|
92
134
|
}
|
|
93
|
-
),
|
|
94
|
-
|
|
135
|
+
) : null,
|
|
136
|
+
w
|
|
95
137
|
]
|
|
96
138
|
},
|
|
97
139
|
"panel"
|
|
@@ -100,59 +142,62 @@ function _({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
|
|
|
100
142
|
document.body
|
|
101
143
|
);
|
|
102
144
|
}
|
|
103
|
-
const
|
|
145
|
+
const B = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
|
|
104
146
|
"div",
|
|
105
147
|
{
|
|
106
|
-
ref:
|
|
107
|
-
className:
|
|
108
|
-
...
|
|
148
|
+
ref: r,
|
|
149
|
+
className: i("flex shrink-0 flex-col gap-1 px-6 pt-6 pr-14", o),
|
|
150
|
+
...t
|
|
109
151
|
}
|
|
110
152
|
));
|
|
111
|
-
|
|
112
|
-
const
|
|
153
|
+
B.displayName = "ModalHeader";
|
|
154
|
+
const C = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
|
|
113
155
|
"h2",
|
|
114
156
|
{
|
|
115
|
-
ref:
|
|
116
|
-
className:
|
|
117
|
-
...
|
|
157
|
+
ref: r,
|
|
158
|
+
className: i("text-lg font-medium text-foreground", o),
|
|
159
|
+
...t
|
|
118
160
|
}
|
|
119
161
|
));
|
|
120
|
-
|
|
121
|
-
const
|
|
162
|
+
C.displayName = "ModalTitle";
|
|
163
|
+
const K = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
|
|
122
164
|
"p",
|
|
123
165
|
{
|
|
124
|
-
ref:
|
|
125
|
-
className:
|
|
126
|
-
...
|
|
166
|
+
ref: r,
|
|
167
|
+
className: i("text-xs text-muted-foreground", o),
|
|
168
|
+
...t
|
|
127
169
|
}
|
|
128
170
|
));
|
|
129
|
-
|
|
130
|
-
const
|
|
171
|
+
K.displayName = "ModalDescription";
|
|
172
|
+
const _ = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
|
|
131
173
|
"div",
|
|
132
174
|
{
|
|
133
|
-
ref:
|
|
134
|
-
className:
|
|
135
|
-
|
|
175
|
+
ref: r,
|
|
176
|
+
className: i(
|
|
177
|
+
"min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 text-xs text-foreground",
|
|
178
|
+
o
|
|
179
|
+
),
|
|
180
|
+
...t
|
|
136
181
|
}
|
|
137
182
|
));
|
|
138
|
-
|
|
139
|
-
const
|
|
183
|
+
_.displayName = "ModalBody";
|
|
184
|
+
const I = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
|
|
140
185
|
"div",
|
|
141
186
|
{
|
|
142
|
-
ref:
|
|
143
|
-
className:
|
|
144
|
-
"flex items-center justify-end gap-2 px-6 pb-6 pt-2",
|
|
187
|
+
ref: r,
|
|
188
|
+
className: i(
|
|
189
|
+
"flex shrink-0 items-center justify-end gap-2 px-6 pb-6 pt-2",
|
|
145
190
|
o
|
|
146
191
|
),
|
|
147
|
-
...
|
|
192
|
+
...t
|
|
148
193
|
}
|
|
149
194
|
));
|
|
150
|
-
|
|
195
|
+
I.displayName = "ModalFooter";
|
|
151
196
|
export {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
197
|
+
Z as Modal,
|
|
198
|
+
_ as ModalBody,
|
|
199
|
+
K as ModalDescription,
|
|
200
|
+
I as ModalFooter,
|
|
201
|
+
B as ModalHeader,
|
|
202
|
+
C as ModalTitle
|
|
158
203
|
};
|
package/components/navbar.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as React from "react";
|
|
|
3
3
|
export declare const Navbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
|
|
4
4
|
export declare const NavbarBrand: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const navbarContentVariants: (props?: ({
|
|
6
|
-
justify?: "
|
|
6
|
+
justify?: "end" | "center" | "start" | null | undefined;
|
|
7
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
8
|
export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof navbarContentVariants> {
|
|
9
9
|
}
|
package/components/navbar.js
CHANGED