@actioneer/ads 0.4.0 → 0.5.0
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/components/chart.js +305 -306
- package/components/drawer.d.ts +15 -0
- package/components/empty-state.d.ts +40 -0
- package/components/empty-state.js +168 -26
- package/components/index.js +319 -315
- package/llms.txt +8 -4
- package/manifest.json +40 -7
- package/package.json +1 -1
- package/styles.css +84 -48
- package/theme.css +84 -48
package/components/drawer.d.ts
CHANGED
|
@@ -32,6 +32,21 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
|
|
|
32
32
|
* page stays visible and interactive while it's open. This is the canonical
|
|
33
33
|
* Drawer in ADS. Use `ModalDrawer` when a page-blocking overlay is genuinely
|
|
34
34
|
* required.
|
|
35
|
+
*
|
|
36
|
+
* REQUIRES A TINTED GROUND. The panel is flat white (`bg-card`) with no shadow
|
|
37
|
+
* and no border — it separates from its neighbour purely by fill contrast, so
|
|
38
|
+
* it is INVISIBLE on a white (`bg-background`) parent. Place it and its sibling
|
|
39
|
+
* content inside a `bg-surface` flex row; the tint is the parent's job, not the
|
|
40
|
+
* panel's (the inline Drawer renders no ground of its own):
|
|
41
|
+
*
|
|
42
|
+
* <div className="flex gap-3 bg-surface p-3">
|
|
43
|
+
* <main className="flex-1 rounded-xl bg-card">…content…</main>
|
|
44
|
+
* <Drawer open={open} onOpenChange={setOpen} aria-label="…">…</Drawer>
|
|
45
|
+
* </div>
|
|
46
|
+
*
|
|
47
|
+
* This mirrors the shell's main + chat layout — white panels on a tinted
|
|
48
|
+
* ground. If the panel doesn't read, fix the ground; never add a border or
|
|
49
|
+
* shadow to force it (that fights principle 1).
|
|
35
50
|
*/
|
|
36
51
|
export declare function Drawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
|
|
37
52
|
/** @deprecated Alias for `Drawer` — the canonical drawer is now the inline
|
|
@@ -1,8 +1,48 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* EmptyState — the "nothing here yet" placeholder.
|
|
4
|
+
*
|
|
5
|
+
* Two registers, chosen by which visual slot you fill:
|
|
6
|
+
* - `icon` (default): a compact icon-in-a-circle for an in-panel empty list.
|
|
7
|
+
* - `illustration`: a larger soft graphic for a full empty *screen*, with a
|
|
8
|
+
* bigger title and more breathing room — the calm, centred pattern.
|
|
9
|
+
*
|
|
10
|
+
* Pass one or the other; `illustration` wins when both are present. The
|
|
11
|
+
* built-in illustrations (`EmptyDocuments`, `EmptySearch`, `EmptyConnections`,
|
|
12
|
+
* `EmptyInsights`) share one soft language — warm greige cards, a single Sage
|
|
13
|
+
* accent — and re-theme with the system since every fill flows from a token.
|
|
14
|
+
*/
|
|
2
15
|
export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
16
|
+
/** Compact icon (rendered inside a muted circle). Ignored if `illustration` is set. */
|
|
3
17
|
icon?: React.ReactNode;
|
|
18
|
+
/** Larger soft graphic for a full empty screen (see the Empty* illustrations). */
|
|
19
|
+
illustration?: React.ReactNode;
|
|
4
20
|
title: React.ReactNode;
|
|
5
21
|
description?: React.ReactNode;
|
|
6
22
|
action?: React.ReactNode;
|
|
7
23
|
}
|
|
8
24
|
export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
type IllustrationProps = {
|
|
26
|
+
className?: string;
|
|
27
|
+
};
|
|
28
|
+
/** No documents / reports / notes — a floating note over a receding one. */
|
|
29
|
+
export declare function EmptyDocuments({ className }: IllustrationProps): React.JSX.Element;
|
|
30
|
+
export declare namespace EmptyDocuments {
|
|
31
|
+
var displayName: string;
|
|
32
|
+
}
|
|
33
|
+
/** No results — a list card with a Sage magnifier searching it. */
|
|
34
|
+
export declare function EmptySearch({ className }: IllustrationProps): React.JSX.Element;
|
|
35
|
+
export declare namespace EmptySearch {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
/** No connections / data sources — a small node graph, one Sage add-node. */
|
|
39
|
+
export declare function EmptyConnections({ className }: IllustrationProps): React.JSX.Element;
|
|
40
|
+
export declare namespace EmptyConnections {
|
|
41
|
+
var displayName: string;
|
|
42
|
+
}
|
|
43
|
+
/** No insights / data yet — rising bars, the tallest in Sage. */
|
|
44
|
+
export declare function EmptyInsights({ className }: IllustrationProps): React.JSX.Element;
|
|
45
|
+
export declare namespace EmptyInsights {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
}
|
|
48
|
+
export {};
|
|
@@ -1,30 +1,172 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import * as
|
|
4
|
-
import { Inbox as
|
|
5
|
-
import { cn as
|
|
6
|
-
const
|
|
7
|
-
({ className:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
s
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
2
|
+
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import * as x from "react";
|
|
4
|
+
import { Inbox as f } from "../lib/icons.js";
|
|
5
|
+
import { cn as s } from "../lib/cn.js";
|
|
6
|
+
const g = x.forwardRef(
|
|
7
|
+
({ className: r, icon: d, illustration: a, title: n, description: c, action: o, ...m }, h) => {
|
|
8
|
+
const l = a != null;
|
|
9
|
+
return /* @__PURE__ */ t(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
ref: h,
|
|
13
|
+
className: s(
|
|
14
|
+
"flex flex-col items-center px-6 text-center",
|
|
15
|
+
l ? "gap-5 py-16" : "gap-3 py-12",
|
|
16
|
+
r
|
|
17
|
+
),
|
|
18
|
+
...m,
|
|
19
|
+
children: [
|
|
20
|
+
l ? a : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: d ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
|
|
21
|
+
/* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: [
|
|
22
|
+
/* @__PURE__ */ e(
|
|
23
|
+
"p",
|
|
24
|
+
{
|
|
25
|
+
className: s(
|
|
26
|
+
l ? "text-lg font-bold text-foreground" : "font-medium"
|
|
27
|
+
),
|
|
28
|
+
children: n
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
c && /* @__PURE__ */ e(
|
|
32
|
+
"p",
|
|
33
|
+
{
|
|
34
|
+
className: s(
|
|
35
|
+
"max-w-sm text-muted-foreground",
|
|
36
|
+
l ? "text-sm" : "text-xs"
|
|
37
|
+
),
|
|
38
|
+
children: c
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
] }),
|
|
42
|
+
o && /* @__PURE__ */ e("div", { className: "mt-2", children: o })
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
26
47
|
);
|
|
27
|
-
|
|
48
|
+
g.displayName = "EmptyState";
|
|
49
|
+
const i = "h-28 w-auto";
|
|
50
|
+
function y({ className: r }) {
|
|
51
|
+
return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
|
|
52
|
+
/* @__PURE__ */ e(
|
|
53
|
+
"rect",
|
|
54
|
+
{
|
|
55
|
+
x: "42",
|
|
56
|
+
y: "24",
|
|
57
|
+
width: "56",
|
|
58
|
+
height: "74",
|
|
59
|
+
rx: "10",
|
|
60
|
+
transform: "rotate(-9 70 60)",
|
|
61
|
+
className: "fill-muted"
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ t("g", { transform: "rotate(6 70 60)", children: [
|
|
65
|
+
/* @__PURE__ */ e(
|
|
66
|
+
"rect",
|
|
67
|
+
{
|
|
68
|
+
x: "42",
|
|
69
|
+
y: "20",
|
|
70
|
+
width: "56",
|
|
71
|
+
height: "76",
|
|
72
|
+
rx: "10",
|
|
73
|
+
className: "fill-elevated stroke-border-strong",
|
|
74
|
+
strokeWidth: "1"
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ e("rect", { x: "51", y: "34", width: "30", height: "6", rx: "3", className: "fill-border-strong" }),
|
|
78
|
+
/* @__PURE__ */ e("rect", { x: "51", y: "47", width: "38", height: "5", rx: "2.5", className: "fill-border" }),
|
|
79
|
+
/* @__PURE__ */ e("rect", { x: "51", y: "57", width: "24", height: "5", rx: "2.5", className: "fill-border" }),
|
|
80
|
+
/* @__PURE__ */ e("circle", { cx: "86", cy: "82", r: "6.5", className: "fill-brand" })
|
|
81
|
+
] })
|
|
82
|
+
] });
|
|
83
|
+
}
|
|
84
|
+
y.displayName = "EmptyDocuments";
|
|
85
|
+
function N({ className: r }) {
|
|
86
|
+
return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
|
|
87
|
+
/* @__PURE__ */ e(
|
|
88
|
+
"rect",
|
|
89
|
+
{
|
|
90
|
+
x: "28",
|
|
91
|
+
y: "24",
|
|
92
|
+
width: "66",
|
|
93
|
+
height: "70",
|
|
94
|
+
rx: "10",
|
|
95
|
+
className: "fill-elevated stroke-border-strong",
|
|
96
|
+
strokeWidth: "1"
|
|
97
|
+
}
|
|
98
|
+
),
|
|
99
|
+
/* @__PURE__ */ e("rect", { x: "39", y: "37", width: "34", height: "5", rx: "2.5", className: "fill-border" }),
|
|
100
|
+
/* @__PURE__ */ e("rect", { x: "39", y: "49", width: "44", height: "5", rx: "2.5", className: "fill-border" }),
|
|
101
|
+
/* @__PURE__ */ e("rect", { x: "39", y: "61", width: "26", height: "5", rx: "2.5", className: "fill-border" }),
|
|
102
|
+
/* @__PURE__ */ t("g", { children: [
|
|
103
|
+
/* @__PURE__ */ e(
|
|
104
|
+
"circle",
|
|
105
|
+
{
|
|
106
|
+
cx: "90",
|
|
107
|
+
cy: "76",
|
|
108
|
+
r: "17",
|
|
109
|
+
className: "fill-elevated stroke-brand",
|
|
110
|
+
strokeWidth: "5"
|
|
111
|
+
}
|
|
112
|
+
),
|
|
113
|
+
/* @__PURE__ */ e(
|
|
114
|
+
"line",
|
|
115
|
+
{
|
|
116
|
+
x1: "102",
|
|
117
|
+
y1: "88",
|
|
118
|
+
x2: "114",
|
|
119
|
+
y2: "100",
|
|
120
|
+
className: "stroke-brand",
|
|
121
|
+
strokeWidth: "6",
|
|
122
|
+
strokeLinecap: "round"
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
] })
|
|
126
|
+
] });
|
|
127
|
+
}
|
|
128
|
+
N.displayName = "EmptySearch";
|
|
129
|
+
function u({ className: r }) {
|
|
130
|
+
return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
|
|
131
|
+
/* @__PURE__ */ e(
|
|
132
|
+
"path",
|
|
133
|
+
{
|
|
134
|
+
d: "M42 44 L70 74 M98 44 L70 74",
|
|
135
|
+
className: "stroke-border-strong",
|
|
136
|
+
strokeWidth: "3",
|
|
137
|
+
fill: "none",
|
|
138
|
+
strokeLinecap: "round"
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
/* @__PURE__ */ e("circle", { cx: "42", cy: "42", r: "13", className: "fill-elevated stroke-border-strong", strokeWidth: "1.5" }),
|
|
142
|
+
/* @__PURE__ */ e("circle", { cx: "98", cy: "42", r: "13", className: "fill-elevated stroke-border-strong", strokeWidth: "1.5" }),
|
|
143
|
+
/* @__PURE__ */ e("circle", { cx: "70", cy: "78", r: "16", className: "fill-brand" }),
|
|
144
|
+
/* @__PURE__ */ e(
|
|
145
|
+
"path",
|
|
146
|
+
{
|
|
147
|
+
d: "M70 71 v14 M63 78 h14",
|
|
148
|
+
className: "stroke-brand-foreground",
|
|
149
|
+
strokeWidth: "3",
|
|
150
|
+
strokeLinecap: "round",
|
|
151
|
+
fill: "none"
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
] });
|
|
155
|
+
}
|
|
156
|
+
u.displayName = "EmptyConnections";
|
|
157
|
+
function p({ className: r }) {
|
|
158
|
+
return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
|
|
159
|
+
/* @__PURE__ */ e("rect", { x: "34", y: "88", width: "72", height: "3", rx: "1.5", className: "fill-border-strong" }),
|
|
160
|
+
/* @__PURE__ */ e("rect", { x: "40", y: "64", width: "15", height: "24", rx: "3", className: "fill-muted" }),
|
|
161
|
+
/* @__PURE__ */ e("rect", { x: "62", y: "50", width: "15", height: "38", rx: "3", className: "fill-border-strong" }),
|
|
162
|
+
/* @__PURE__ */ e("rect", { x: "84", y: "34", width: "15", height: "54", rx: "3", className: "fill-brand" })
|
|
163
|
+
] });
|
|
164
|
+
}
|
|
165
|
+
p.displayName = "EmptyInsights";
|
|
28
166
|
export {
|
|
29
|
-
|
|
167
|
+
u as EmptyConnections,
|
|
168
|
+
y as EmptyDocuments,
|
|
169
|
+
p as EmptyInsights,
|
|
170
|
+
N as EmptySearch,
|
|
171
|
+
g as EmptyState
|
|
30
172
|
};
|