@adarsh_goswami/design 0.1.13-dev → 0.1.15-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +500 -294
- package/dist/index.css +68 -0
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +441 -236
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,12 +1,216 @@
|
|
|
1
|
+
// src/components/BlogPost/BlogPost.tsx
|
|
2
|
+
import ReactMarkdown from "react-markdown";
|
|
3
|
+
import remarkGfm from "remark-gfm";
|
|
4
|
+
import rehypeHighlight from "rehype-highlight";
|
|
5
|
+
import { Box, Flex, Heading, Separator, Text } from "@radix-ui/themes";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
var markdownComponents = {
|
|
8
|
+
h1: ({ children }) => /* @__PURE__ */ jsx(
|
|
9
|
+
Heading,
|
|
10
|
+
{
|
|
11
|
+
as: "h1",
|
|
12
|
+
size: "7",
|
|
13
|
+
mb: "4",
|
|
14
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
15
|
+
children
|
|
16
|
+
}
|
|
17
|
+
),
|
|
18
|
+
h2: ({ children }) => /* @__PURE__ */ jsx(
|
|
19
|
+
Heading,
|
|
20
|
+
{
|
|
21
|
+
as: "h2",
|
|
22
|
+
size: "5",
|
|
23
|
+
mb: "3",
|
|
24
|
+
mt: "6",
|
|
25
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
26
|
+
children
|
|
27
|
+
}
|
|
28
|
+
),
|
|
29
|
+
h3: ({ children }) => /* @__PURE__ */ jsx(
|
|
30
|
+
Heading,
|
|
31
|
+
{
|
|
32
|
+
as: "h3",
|
|
33
|
+
size: "4",
|
|
34
|
+
mb: "2",
|
|
35
|
+
mt: "5",
|
|
36
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-secondary)" },
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
p: ({ children }) => /* @__PURE__ */ jsx(
|
|
41
|
+
Text,
|
|
42
|
+
{
|
|
43
|
+
as: "p",
|
|
44
|
+
size: "3",
|
|
45
|
+
mb: "4",
|
|
46
|
+
style: {
|
|
47
|
+
fontFamily: "var(--brand-font-body)",
|
|
48
|
+
color: "var(--text-secondary)",
|
|
49
|
+
lineHeight: "var(--brand-leading-relaxed)",
|
|
50
|
+
display: "block"
|
|
51
|
+
},
|
|
52
|
+
children
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
a: ({ href, children }) => /* @__PURE__ */ jsx("a", { href: href ?? "#", style: { color: "var(--accent)", textDecoration: "underline" }, children }),
|
|
56
|
+
code: ({ className, children }) => {
|
|
57
|
+
const isBlock = className?.startsWith("language-");
|
|
58
|
+
if (isBlock) {
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
Box,
|
|
61
|
+
{
|
|
62
|
+
mb: "4",
|
|
63
|
+
style: {
|
|
64
|
+
borderRadius: "var(--brand-radius-lg)",
|
|
65
|
+
border: "1px solid var(--border-soft)",
|
|
66
|
+
backgroundColor: "var(--bg-raised)",
|
|
67
|
+
overflowX: "auto"
|
|
68
|
+
},
|
|
69
|
+
children: /* @__PURE__ */ jsx(
|
|
70
|
+
"code",
|
|
71
|
+
{
|
|
72
|
+
className: className ?? "",
|
|
73
|
+
style: {
|
|
74
|
+
display: "block",
|
|
75
|
+
padding: "var(--sp-4)",
|
|
76
|
+
fontSize: "var(--brand-text-sm)",
|
|
77
|
+
fontFamily: "var(--brand-font-mono)",
|
|
78
|
+
color: "var(--text-primary)"
|
|
79
|
+
},
|
|
80
|
+
children
|
|
81
|
+
}
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
return /* @__PURE__ */ jsx(
|
|
87
|
+
"code",
|
|
88
|
+
{
|
|
89
|
+
style: {
|
|
90
|
+
backgroundColor: "var(--bg-raised)",
|
|
91
|
+
color: "var(--accent-bright)",
|
|
92
|
+
borderRadius: "var(--brand-radius-sm)",
|
|
93
|
+
padding: "2px 6px",
|
|
94
|
+
fontSize: "var(--brand-text-sm)",
|
|
95
|
+
fontFamily: "var(--brand-font-mono)"
|
|
96
|
+
},
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
},
|
|
101
|
+
ul: ({ children }) => /* @__PURE__ */ jsx(
|
|
102
|
+
"ul",
|
|
103
|
+
{
|
|
104
|
+
style: {
|
|
105
|
+
marginBottom: "var(--sp-4)",
|
|
106
|
+
paddingLeft: "var(--sp-4)",
|
|
107
|
+
listStyleType: "disc",
|
|
108
|
+
color: "var(--text-secondary)",
|
|
109
|
+
fontFamily: "var(--brand-font-body)"
|
|
110
|
+
},
|
|
111
|
+
children
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
ol: ({ children }) => /* @__PURE__ */ jsx(
|
|
115
|
+
"ol",
|
|
116
|
+
{
|
|
117
|
+
style: {
|
|
118
|
+
marginBottom: "var(--sp-4)",
|
|
119
|
+
paddingLeft: "var(--sp-4)",
|
|
120
|
+
listStyleType: "decimal",
|
|
121
|
+
color: "var(--text-secondary)",
|
|
122
|
+
fontFamily: "var(--brand-font-body)"
|
|
123
|
+
},
|
|
124
|
+
children
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
li: ({ children }) => /* @__PURE__ */ jsx(
|
|
128
|
+
Text,
|
|
129
|
+
{
|
|
130
|
+
as: "p",
|
|
131
|
+
size: "3",
|
|
132
|
+
mb: "1",
|
|
133
|
+
style: {
|
|
134
|
+
fontFamily: "var(--brand-font-body)",
|
|
135
|
+
color: "var(--text-secondary)",
|
|
136
|
+
display: "list-item"
|
|
137
|
+
},
|
|
138
|
+
children
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
blockquote: ({ children }) => /* @__PURE__ */ jsx(
|
|
142
|
+
Box,
|
|
143
|
+
{
|
|
144
|
+
mb: "4",
|
|
145
|
+
pl: "4",
|
|
146
|
+
py: "2",
|
|
147
|
+
style: {
|
|
148
|
+
borderLeft: "2px solid var(--accent)",
|
|
149
|
+
backgroundColor: "var(--accent-subtle)",
|
|
150
|
+
borderRadius: "0 var(--brand-radius-md) var(--brand-radius-md) 0"
|
|
151
|
+
},
|
|
152
|
+
children
|
|
153
|
+
}
|
|
154
|
+
),
|
|
155
|
+
table: ({ children }) => /* @__PURE__ */ jsx(Box, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx(
|
|
156
|
+
"table",
|
|
157
|
+
{
|
|
158
|
+
style: {
|
|
159
|
+
width: "100%",
|
|
160
|
+
borderCollapse: "collapse",
|
|
161
|
+
fontSize: "var(--brand-text-sm)",
|
|
162
|
+
fontFamily: "var(--brand-font-body)"
|
|
163
|
+
},
|
|
164
|
+
children
|
|
165
|
+
}
|
|
166
|
+
) }),
|
|
167
|
+
th: ({ children }) => /* @__PURE__ */ jsx(
|
|
168
|
+
"th",
|
|
169
|
+
{
|
|
170
|
+
style: {
|
|
171
|
+
textAlign: "left",
|
|
172
|
+
padding: "8px 12px",
|
|
173
|
+
borderBottom: "1px solid var(--border-mid)",
|
|
174
|
+
color: "var(--text-primary)",
|
|
175
|
+
fontWeight: 500
|
|
176
|
+
},
|
|
177
|
+
children
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
td: ({ children }) => /* @__PURE__ */ jsx(
|
|
181
|
+
"td",
|
|
182
|
+
{
|
|
183
|
+
style: {
|
|
184
|
+
padding: "8px 12px",
|
|
185
|
+
borderBottom: "1px solid var(--border-subtle)",
|
|
186
|
+
color: "var(--text-secondary)"
|
|
187
|
+
},
|
|
188
|
+
children
|
|
189
|
+
}
|
|
190
|
+
),
|
|
191
|
+
hr: () => /* @__PURE__ */ jsx(Flex, { my: "6", children: /* @__PURE__ */ jsx(Separator, { size: "4" }) })
|
|
192
|
+
};
|
|
193
|
+
function BlogPost({ content }) {
|
|
194
|
+
return /* @__PURE__ */ jsx("article", { className: "blog-post", children: /* @__PURE__ */ jsx(
|
|
195
|
+
ReactMarkdown,
|
|
196
|
+
{
|
|
197
|
+
remarkPlugins: [remarkGfm],
|
|
198
|
+
rehypePlugins: [rehypeHighlight],
|
|
199
|
+
components: markdownComponents,
|
|
200
|
+
children: content
|
|
201
|
+
}
|
|
202
|
+
) });
|
|
203
|
+
}
|
|
204
|
+
|
|
1
205
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
2
|
-
import { Badge as Badge2, Box as
|
|
206
|
+
import { Badge as Badge2, Box as Box4, Flex as Flex4, Heading as Heading4, Separator as Separator4, Text as Text4, ScrollArea as ScrollArea2 } from "@radix-ui/themes";
|
|
3
207
|
|
|
4
208
|
// src/components/DocsLayout/NavSidebar.tsx
|
|
5
|
-
import { Badge, Box, Flex, Heading, ScrollArea, Separator, Text } from "@radix-ui/themes";
|
|
6
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
209
|
+
import { Badge, Box as Box2, Flex as Flex2, Heading as Heading2, ScrollArea, Separator as Separator2, Text as Text2 } from "@radix-ui/themes";
|
|
210
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
7
211
|
function NavStatusBadge({ status }) {
|
|
8
212
|
if (status === "final") return null;
|
|
9
|
-
return /* @__PURE__ */
|
|
213
|
+
return /* @__PURE__ */ jsx2(Badge, { size: "1", variant: "soft", color: status === "draft" ? "yellow" : "gray", children: status });
|
|
10
214
|
}
|
|
11
215
|
function NavLeaf({
|
|
12
216
|
id,
|
|
@@ -18,14 +222,14 @@ function NavLeaf({
|
|
|
18
222
|
}) {
|
|
19
223
|
const isActive = slug === activeSlug;
|
|
20
224
|
const isDeprecated = status === "deprecated";
|
|
21
|
-
return /* @__PURE__ */
|
|
225
|
+
return /* @__PURE__ */ jsx2(Box2, { mb: "1", children: /* @__PURE__ */ jsx2(
|
|
22
226
|
"button",
|
|
23
227
|
{
|
|
24
228
|
type: "button",
|
|
25
229
|
onClick: () => onSlugChange(slug),
|
|
26
230
|
style: { width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0 },
|
|
27
231
|
children: /* @__PURE__ */ jsxs(
|
|
28
|
-
|
|
232
|
+
Flex2,
|
|
29
233
|
{
|
|
30
234
|
align: "center",
|
|
31
235
|
justify: "between",
|
|
@@ -38,8 +242,8 @@ function NavLeaf({
|
|
|
38
242
|
].join(" "),
|
|
39
243
|
style: { minHeight: "30px" },
|
|
40
244
|
children: [
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
|
|
245
|
+
/* @__PURE__ */ jsx2(
|
|
246
|
+
Text2,
|
|
43
247
|
{
|
|
44
248
|
as: "span",
|
|
45
249
|
size: "2",
|
|
@@ -51,7 +255,7 @@ function NavLeaf({
|
|
|
51
255
|
children: label
|
|
52
256
|
}
|
|
53
257
|
),
|
|
54
|
-
status && /* @__PURE__ */
|
|
258
|
+
status && /* @__PURE__ */ jsx2(NavStatusBadge, { status })
|
|
55
259
|
]
|
|
56
260
|
}
|
|
57
261
|
)
|
|
@@ -64,7 +268,7 @@ function NavItemRow({
|
|
|
64
268
|
onSlugChange
|
|
65
269
|
}) {
|
|
66
270
|
if (item.slug) {
|
|
67
|
-
return /* @__PURE__ */
|
|
271
|
+
return /* @__PURE__ */ jsx2(
|
|
68
272
|
NavLeaf,
|
|
69
273
|
{
|
|
70
274
|
id: item.id,
|
|
@@ -76,10 +280,10 @@ function NavItemRow({
|
|
|
76
280
|
}
|
|
77
281
|
);
|
|
78
282
|
}
|
|
79
|
-
return /* @__PURE__ */ jsxs(
|
|
80
|
-
/* @__PURE__ */ jsxs(
|
|
81
|
-
/* @__PURE__ */
|
|
82
|
-
|
|
283
|
+
return /* @__PURE__ */ jsxs(Box2, { mb: "1", children: [
|
|
284
|
+
/* @__PURE__ */ jsxs(Flex2, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
|
|
285
|
+
/* @__PURE__ */ jsx2(
|
|
286
|
+
Text2,
|
|
83
287
|
{
|
|
84
288
|
as: "p",
|
|
85
289
|
size: "2",
|
|
@@ -92,9 +296,9 @@ function NavItemRow({
|
|
|
92
296
|
children: item.label
|
|
93
297
|
}
|
|
94
298
|
),
|
|
95
|
-
item.status && /* @__PURE__ */
|
|
299
|
+
item.status && /* @__PURE__ */ jsx2(NavStatusBadge, { status: item.status })
|
|
96
300
|
] }),
|
|
97
|
-
item.children && item.children.length > 0 && /* @__PURE__ */
|
|
301
|
+
item.children && item.children.length > 0 && /* @__PURE__ */ jsx2(Box2, { pl: "3", children: item.children.map((child) => /* @__PURE__ */ jsx2(
|
|
98
302
|
NavLeaf,
|
|
99
303
|
{
|
|
100
304
|
id: child.id,
|
|
@@ -110,7 +314,7 @@ function NavItemRow({
|
|
|
110
314
|
}
|
|
111
315
|
function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
112
316
|
return /* @__PURE__ */ jsxs(
|
|
113
|
-
|
|
317
|
+
Box2,
|
|
114
318
|
{
|
|
115
319
|
style: {
|
|
116
320
|
width: "256px",
|
|
@@ -122,16 +326,16 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
122
326
|
flexDirection: "column"
|
|
123
327
|
},
|
|
124
328
|
children: [
|
|
125
|
-
/* @__PURE__ */
|
|
126
|
-
|
|
329
|
+
/* @__PURE__ */ jsx2(
|
|
330
|
+
Box2,
|
|
127
331
|
{
|
|
128
332
|
px: "4",
|
|
129
333
|
py: "3",
|
|
130
334
|
style: { borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 },
|
|
131
|
-
children: /* @__PURE__ */ jsxs(
|
|
132
|
-
meta.logoUrl && /* @__PURE__ */
|
|
133
|
-
/* @__PURE__ */
|
|
134
|
-
|
|
335
|
+
children: /* @__PURE__ */ jsxs(Flex2, { align: "center", gap: "2", children: [
|
|
336
|
+
meta.logoUrl && /* @__PURE__ */ jsx2("img", { src: meta.logoUrl, alt: meta.title, style: { height: "20px", width: "auto" } }),
|
|
337
|
+
/* @__PURE__ */ jsx2(
|
|
338
|
+
Heading2,
|
|
135
339
|
{
|
|
136
340
|
as: "h2",
|
|
137
341
|
size: "3",
|
|
@@ -139,13 +343,13 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
139
343
|
children: meta.title
|
|
140
344
|
}
|
|
141
345
|
),
|
|
142
|
-
meta.version && /* @__PURE__ */
|
|
346
|
+
meta.version && /* @__PURE__ */ jsx2(Badge, { size: "1", variant: "soft", color: "violet", children: meta.version })
|
|
143
347
|
] })
|
|
144
348
|
}
|
|
145
349
|
),
|
|
146
|
-
/* @__PURE__ */
|
|
147
|
-
/* @__PURE__ */
|
|
148
|
-
|
|
350
|
+
/* @__PURE__ */ jsx2(ScrollArea, { scrollbars: "vertical", style: { flex: 1 }, children: /* @__PURE__ */ jsx2(Box2, { p: "4", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Box2, { mb: "4", children: [
|
|
351
|
+
/* @__PURE__ */ jsx2(
|
|
352
|
+
Text2,
|
|
149
353
|
{
|
|
150
354
|
as: "p",
|
|
151
355
|
size: "1",
|
|
@@ -161,8 +365,8 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
161
365
|
children: section.label
|
|
162
366
|
}
|
|
163
367
|
),
|
|
164
|
-
/* @__PURE__ */
|
|
165
|
-
section.items.map((item) => /* @__PURE__ */
|
|
368
|
+
/* @__PURE__ */ jsx2(Separator2, { size: "4", mb: "2" }),
|
|
369
|
+
section.items.map((item) => /* @__PURE__ */ jsx2(
|
|
166
370
|
NavItemRow,
|
|
167
371
|
{
|
|
168
372
|
item,
|
|
@@ -178,14 +382,14 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
178
382
|
}
|
|
179
383
|
|
|
180
384
|
// src/components/DocsLayout/MarkdownContent.tsx
|
|
181
|
-
import
|
|
182
|
-
import
|
|
183
|
-
import
|
|
184
|
-
import { Box as
|
|
185
|
-
import { jsx as
|
|
186
|
-
var
|
|
187
|
-
h1: ({ children }) => /* @__PURE__ */
|
|
188
|
-
|
|
385
|
+
import ReactMarkdown2 from "react-markdown";
|
|
386
|
+
import remarkGfm2 from "remark-gfm";
|
|
387
|
+
import rehypeHighlight2 from "rehype-highlight";
|
|
388
|
+
import { Box as Box3, Flex as Flex3, Heading as Heading3, Separator as Separator3, Text as Text3 } from "@radix-ui/themes";
|
|
389
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
390
|
+
var markdownComponents2 = {
|
|
391
|
+
h1: ({ children }) => /* @__PURE__ */ jsx3(
|
|
392
|
+
Heading3,
|
|
189
393
|
{
|
|
190
394
|
as: "h1",
|
|
191
395
|
size: "7",
|
|
@@ -194,8 +398,8 @@ var markdownComponents = {
|
|
|
194
398
|
children
|
|
195
399
|
}
|
|
196
400
|
),
|
|
197
|
-
h2: ({ children }) => /* @__PURE__ */
|
|
198
|
-
|
|
401
|
+
h2: ({ children }) => /* @__PURE__ */ jsx3(
|
|
402
|
+
Heading3,
|
|
199
403
|
{
|
|
200
404
|
as: "h2",
|
|
201
405
|
size: "5",
|
|
@@ -205,8 +409,8 @@ var markdownComponents = {
|
|
|
205
409
|
children
|
|
206
410
|
}
|
|
207
411
|
),
|
|
208
|
-
h3: ({ children }) => /* @__PURE__ */
|
|
209
|
-
|
|
412
|
+
h3: ({ children }) => /* @__PURE__ */ jsx3(
|
|
413
|
+
Heading3,
|
|
210
414
|
{
|
|
211
415
|
as: "h3",
|
|
212
416
|
size: "4",
|
|
@@ -216,8 +420,8 @@ var markdownComponents = {
|
|
|
216
420
|
children
|
|
217
421
|
}
|
|
218
422
|
),
|
|
219
|
-
p: ({ children }) => /* @__PURE__ */
|
|
220
|
-
|
|
423
|
+
p: ({ children }) => /* @__PURE__ */ jsx3(
|
|
424
|
+
Text3,
|
|
221
425
|
{
|
|
222
426
|
as: "p",
|
|
223
427
|
size: "3",
|
|
@@ -231,7 +435,7 @@ var markdownComponents = {
|
|
|
231
435
|
children
|
|
232
436
|
}
|
|
233
437
|
),
|
|
234
|
-
a: ({ href, children }) => /* @__PURE__ */
|
|
438
|
+
a: ({ href, children }) => /* @__PURE__ */ jsx3(
|
|
235
439
|
"a",
|
|
236
440
|
{
|
|
237
441
|
href: href ?? "#",
|
|
@@ -242,8 +446,8 @@ var markdownComponents = {
|
|
|
242
446
|
code: ({ className, children }) => {
|
|
243
447
|
const isBlock = className?.startsWith("language-");
|
|
244
448
|
if (isBlock) {
|
|
245
|
-
return /* @__PURE__ */
|
|
246
|
-
|
|
449
|
+
return /* @__PURE__ */ jsx3(
|
|
450
|
+
Box3,
|
|
247
451
|
{
|
|
248
452
|
mb: "4",
|
|
249
453
|
style: {
|
|
@@ -252,7 +456,7 @@ var markdownComponents = {
|
|
|
252
456
|
backgroundColor: "var(--bg-raised)",
|
|
253
457
|
overflowX: "auto"
|
|
254
458
|
},
|
|
255
|
-
children: /* @__PURE__ */
|
|
459
|
+
children: /* @__PURE__ */ jsx3(
|
|
256
460
|
"code",
|
|
257
461
|
{
|
|
258
462
|
className: className ?? "",
|
|
@@ -269,7 +473,7 @@ var markdownComponents = {
|
|
|
269
473
|
}
|
|
270
474
|
);
|
|
271
475
|
}
|
|
272
|
-
return /* @__PURE__ */
|
|
476
|
+
return /* @__PURE__ */ jsx3(
|
|
273
477
|
"code",
|
|
274
478
|
{
|
|
275
479
|
style: {
|
|
@@ -284,7 +488,7 @@ var markdownComponents = {
|
|
|
284
488
|
}
|
|
285
489
|
);
|
|
286
490
|
},
|
|
287
|
-
ul: ({ children }) => /* @__PURE__ */
|
|
491
|
+
ul: ({ children }) => /* @__PURE__ */ jsx3(
|
|
288
492
|
"ul",
|
|
289
493
|
{
|
|
290
494
|
style: {
|
|
@@ -297,7 +501,7 @@ var markdownComponents = {
|
|
|
297
501
|
children
|
|
298
502
|
}
|
|
299
503
|
),
|
|
300
|
-
ol: ({ children }) => /* @__PURE__ */
|
|
504
|
+
ol: ({ children }) => /* @__PURE__ */ jsx3(
|
|
301
505
|
"ol",
|
|
302
506
|
{
|
|
303
507
|
style: {
|
|
@@ -310,8 +514,8 @@ var markdownComponents = {
|
|
|
310
514
|
children
|
|
311
515
|
}
|
|
312
516
|
),
|
|
313
|
-
li: ({ children }) => /* @__PURE__ */
|
|
314
|
-
|
|
517
|
+
li: ({ children }) => /* @__PURE__ */ jsx3(
|
|
518
|
+
Text3,
|
|
315
519
|
{
|
|
316
520
|
as: "p",
|
|
317
521
|
size: "3",
|
|
@@ -324,8 +528,8 @@ var markdownComponents = {
|
|
|
324
528
|
children
|
|
325
529
|
}
|
|
326
530
|
),
|
|
327
|
-
blockquote: ({ children }) => /* @__PURE__ */
|
|
328
|
-
|
|
531
|
+
blockquote: ({ children }) => /* @__PURE__ */ jsx3(
|
|
532
|
+
Box3,
|
|
329
533
|
{
|
|
330
534
|
mb: "4",
|
|
331
535
|
pl: "4",
|
|
@@ -338,7 +542,7 @@ var markdownComponents = {
|
|
|
338
542
|
children
|
|
339
543
|
}
|
|
340
544
|
),
|
|
341
|
-
table: ({ children }) => /* @__PURE__ */
|
|
545
|
+
table: ({ children }) => /* @__PURE__ */ jsx3(Box3, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx3(
|
|
342
546
|
"table",
|
|
343
547
|
{
|
|
344
548
|
style: {
|
|
@@ -350,7 +554,7 @@ var markdownComponents = {
|
|
|
350
554
|
children
|
|
351
555
|
}
|
|
352
556
|
) }),
|
|
353
|
-
th: ({ children }) => /* @__PURE__ */
|
|
557
|
+
th: ({ children }) => /* @__PURE__ */ jsx3(
|
|
354
558
|
"th",
|
|
355
559
|
{
|
|
356
560
|
style: {
|
|
@@ -363,7 +567,7 @@ var markdownComponents = {
|
|
|
363
567
|
children
|
|
364
568
|
}
|
|
365
569
|
),
|
|
366
|
-
td: ({ children }) => /* @__PURE__ */
|
|
570
|
+
td: ({ children }) => /* @__PURE__ */ jsx3(
|
|
367
571
|
"td",
|
|
368
572
|
{
|
|
369
573
|
style: {
|
|
@@ -374,22 +578,22 @@ var markdownComponents = {
|
|
|
374
578
|
children
|
|
375
579
|
}
|
|
376
580
|
),
|
|
377
|
-
hr: () => /* @__PURE__ */
|
|
581
|
+
hr: () => /* @__PURE__ */ jsx3(Flex3, { my: "6", children: /* @__PURE__ */ jsx3(Separator3, { size: "4" }) })
|
|
378
582
|
};
|
|
379
583
|
function MarkdownContent({ content }) {
|
|
380
|
-
return /* @__PURE__ */
|
|
381
|
-
|
|
584
|
+
return /* @__PURE__ */ jsx3(
|
|
585
|
+
ReactMarkdown2,
|
|
382
586
|
{
|
|
383
|
-
remarkPlugins: [
|
|
384
|
-
rehypePlugins: [
|
|
385
|
-
components:
|
|
587
|
+
remarkPlugins: [remarkGfm2],
|
|
588
|
+
rehypePlugins: [rehypeHighlight2],
|
|
589
|
+
components: markdownComponents2,
|
|
386
590
|
children: content
|
|
387
591
|
}
|
|
388
592
|
);
|
|
389
593
|
}
|
|
390
594
|
|
|
391
595
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
392
|
-
import { Fragment, jsx as
|
|
596
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
393
597
|
var PAGE_TYPE_COLORS = {
|
|
394
598
|
prd: "violet",
|
|
395
599
|
adr: "blue",
|
|
@@ -397,13 +601,13 @@ var PAGE_TYPE_COLORS = {
|
|
|
397
601
|
reference: "gray"
|
|
398
602
|
};
|
|
399
603
|
function PageTypeBadge({ type }) {
|
|
400
|
-
return /* @__PURE__ */
|
|
604
|
+
return /* @__PURE__ */ jsx4(Badge2, { size: "1", variant: "soft", color: PAGE_TYPE_COLORS[type], children: type.toUpperCase() });
|
|
401
605
|
}
|
|
402
606
|
function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
403
607
|
const { meta, navigation, pages } = data;
|
|
404
608
|
const page = pages[activeSlug];
|
|
405
|
-
return /* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
609
|
+
return /* @__PURE__ */ jsx4(Flex4, { direction: "column", style: { height: "100vh", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsxs2(Flex4, { direction: "row", style: { flex: 1, overflow: "hidden" }, children: [
|
|
610
|
+
/* @__PURE__ */ jsx4(
|
|
407
611
|
NavSidebar,
|
|
408
612
|
{
|
|
409
613
|
meta,
|
|
@@ -412,11 +616,11 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
412
616
|
onSlugChange
|
|
413
617
|
}
|
|
414
618
|
),
|
|
415
|
-
/* @__PURE__ */
|
|
416
|
-
/* @__PURE__ */ jsxs2(
|
|
417
|
-
page.type && /* @__PURE__ */
|
|
619
|
+
/* @__PURE__ */ jsx4(Box4, { style: { flex: 1, overflow: "hidden", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsx4(ScrollArea2, { scrollbars: "vertical", style: { height: "100%" }, children: /* @__PURE__ */ jsx4(Box4, { p: "8", style: { maxWidth: "768px", margin: "0 auto" }, children: !page ? /* @__PURE__ */ jsx4(Flex4, { align: "center", justify: "center", style: { height: "300px" }, children: /* @__PURE__ */ jsx4(Text4, { size: "3", style: { color: "var(--text-muted)" }, children: "Page not found" }) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
620
|
+
/* @__PURE__ */ jsxs2(Flex4, { align: "center", gap: "3", mb: "3", children: [
|
|
621
|
+
page.type && /* @__PURE__ */ jsx4(PageTypeBadge, { type: page.type }),
|
|
418
622
|
page.lastUpdated && /* @__PURE__ */ jsxs2(
|
|
419
|
-
|
|
623
|
+
Text4,
|
|
420
624
|
{
|
|
421
625
|
size: "1",
|
|
422
626
|
style: { color: "var(--text-muted)", fontFamily: "var(--brand-font-body)" },
|
|
@@ -427,8 +631,8 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
427
631
|
}
|
|
428
632
|
)
|
|
429
633
|
] }),
|
|
430
|
-
/* @__PURE__ */
|
|
431
|
-
|
|
634
|
+
/* @__PURE__ */ jsx4(
|
|
635
|
+
Heading4,
|
|
432
636
|
{
|
|
433
637
|
as: "h1",
|
|
434
638
|
size: "8",
|
|
@@ -440,48 +644,48 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
440
644
|
children: page.title
|
|
441
645
|
}
|
|
442
646
|
),
|
|
443
|
-
/* @__PURE__ */
|
|
444
|
-
/* @__PURE__ */
|
|
647
|
+
/* @__PURE__ */ jsx4(Separator4, { size: "4", mb: "6" }),
|
|
648
|
+
/* @__PURE__ */ jsx4(MarkdownContent, { content: page.content })
|
|
445
649
|
] }) }) }) })
|
|
446
650
|
] }) });
|
|
447
651
|
}
|
|
448
652
|
|
|
449
653
|
// src/components/Logo/Logo.tsx
|
|
450
|
-
import { jsx as
|
|
654
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
451
655
|
function AgMark({ size = 64, variant = "dark" }) {
|
|
452
656
|
const aPrimary = variant === "light" ? "#4A3FCC" : variant === "glow" ? "#9B8FFB" : "#7C6EFA";
|
|
453
657
|
const gPrimary = variant === "light" ? "#0A0A0B" : "#F0EEF8";
|
|
454
658
|
const bgFill = variant === "light" ? "#F0EEF8" : variant === "glow" ? "url(#agGlowGrad)" : "#111113";
|
|
455
659
|
return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 64 64", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
456
|
-
variant === "glow" && /* @__PURE__ */
|
|
457
|
-
/* @__PURE__ */
|
|
458
|
-
/* @__PURE__ */
|
|
660
|
+
variant === "glow" && /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("radialGradient", { id: "agGlowGrad", cx: "30%", cy: "30%", r: "80%", children: [
|
|
661
|
+
/* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#1A1630" }),
|
|
662
|
+
/* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#0D0C1A" })
|
|
459
663
|
] }) }),
|
|
460
|
-
/* @__PURE__ */
|
|
461
|
-
/* @__PURE__ */
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
-
/* @__PURE__ */
|
|
464
|
-
/* @__PURE__ */
|
|
664
|
+
/* @__PURE__ */ jsx5("rect", { width: "64", height: "64", rx: "14", fill: bgFill }),
|
|
665
|
+
/* @__PURE__ */ jsx5("path", { d: "M14 46 L24 20 L34 46", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
666
|
+
/* @__PURE__ */ jsx5("line", { x1: "18", y1: "37", x2: "30", y2: "37", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round" }),
|
|
667
|
+
/* @__PURE__ */ jsx5("path", { d: "M38 28 C38 23 42 20 47 20 C52 20 55 23 55 28 L55 32 L49 32 L49 29", stroke: gPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
668
|
+
/* @__PURE__ */ jsx5("path", { d: "M38 28 C38 33 38 38 38 40 C38 43.5 42 46 47 46 C52 46 55 43.5 55 40 L55 32", stroke: gPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
465
669
|
] });
|
|
466
670
|
}
|
|
467
671
|
function AgWordmark() {
|
|
468
672
|
return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
469
673
|
/* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
|
|
470
|
-
/* @__PURE__ */
|
|
471
|
-
/* @__PURE__ */
|
|
472
|
-
/* @__PURE__ */
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
/* @__PURE__ */
|
|
674
|
+
/* @__PURE__ */ jsx5("rect", { width: "36", height: "36", rx: "8", fill: "#18181C" }),
|
|
675
|
+
/* @__PURE__ */ jsx5("path", { d: "M6 26 L13 10 L20 26", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
676
|
+
/* @__PURE__ */ jsx5("line", { x1: "9", y1: "20.5", x2: "17", y2: "20.5", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
677
|
+
/* @__PURE__ */ jsx5("path", { d: "M23 16.5 C23 13.5 25.5 12 28 12 C30.5 12 32 13.5 32 16.5 L32 18.5 L28.5 18.5 L28.5 16.5", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
678
|
+
/* @__PURE__ */ jsx5("path", { d: "M23 16.5 C23 19 23 21.5 23 23 C23 25 25.5 26 28 26 C30.5 26 32 25 32 23 L32 18.5", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
475
679
|
] }),
|
|
476
680
|
/* @__PURE__ */ jsxs3("span", { style: { fontFamily: "var(--brand-font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-primary)", letterSpacing: "-0.02em" }, children: [
|
|
477
681
|
"Adarsh",
|
|
478
|
-
/* @__PURE__ */
|
|
682
|
+
/* @__PURE__ */ jsx5("span", { style: { color: "var(--accent)" }, children: "." })
|
|
479
683
|
] })
|
|
480
684
|
] });
|
|
481
685
|
}
|
|
482
686
|
|
|
483
687
|
// src/components/Footer/Footer.tsx
|
|
484
|
-
import { jsx as
|
|
688
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
485
689
|
function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
486
690
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
487
691
|
return /* @__PURE__ */ jsxs4("div", { style: {
|
|
@@ -494,11 +698,11 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
|
494
698
|
flexWrap: "wrap",
|
|
495
699
|
gap: "var(--sp-4)"
|
|
496
700
|
}, children: [
|
|
497
|
-
/* @__PURE__ */
|
|
701
|
+
/* @__PURE__ */ jsx6(AgWordmark, {}),
|
|
498
702
|
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
499
703
|
/* @__PURE__ */ jsxs4("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
|
|
500
|
-
/* @__PURE__ */
|
|
501
|
-
/* @__PURE__ */
|
|
704
|
+
/* @__PURE__ */ jsx6("circle", { cx: "6", cy: "6", r: "5.5", stroke: "var(--border-soft)" }),
|
|
705
|
+
/* @__PURE__ */ jsx6("path", { d: "M8 4.5A2.5 2.5 0 1 0 8 7.5", stroke: "var(--text-disabled)", strokeWidth: "1", strokeLinecap: "round" })
|
|
502
706
|
] }),
|
|
503
707
|
/* @__PURE__ */ jsxs4("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
|
|
504
708
|
year,
|
|
@@ -524,7 +728,7 @@ function useTheme() {
|
|
|
524
728
|
}
|
|
525
729
|
|
|
526
730
|
// src/components/Theme/ThemeProvider.tsx
|
|
527
|
-
import { jsx as
|
|
731
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
528
732
|
function ThemeProvider({
|
|
529
733
|
children,
|
|
530
734
|
defaultTheme = "dark"
|
|
@@ -540,15 +744,15 @@ function ThemeProvider({
|
|
|
540
744
|
const toggleTheme = useCallback(() => {
|
|
541
745
|
setThemeState((prev) => prev === "dark" ? "light" : "dark");
|
|
542
746
|
}, []);
|
|
543
|
-
return /* @__PURE__ */
|
|
747
|
+
return /* @__PURE__ */ jsx7(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: /* @__PURE__ */ jsx7(Theme, { appearance: theme, children }) });
|
|
544
748
|
}
|
|
545
749
|
|
|
546
750
|
// src/components/Theme/ThemeToggle.tsx
|
|
547
751
|
import { Switch } from "@radix-ui/themes";
|
|
548
|
-
import { jsx as
|
|
752
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
549
753
|
function ThemeToggle({ "aria-label": ariaLabel = "Toggle theme" }) {
|
|
550
754
|
const { theme, toggleTheme } = useTheme();
|
|
551
|
-
return /* @__PURE__ */
|
|
755
|
+
return /* @__PURE__ */ jsx8(
|
|
552
756
|
Switch,
|
|
553
757
|
{
|
|
554
758
|
size: "2",
|
|
@@ -622,7 +826,7 @@ var package_default = {
|
|
|
622
826
|
};
|
|
623
827
|
|
|
624
828
|
// src/components/ThemePage/ThemePage.tsx
|
|
625
|
-
import { jsx as
|
|
829
|
+
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
626
830
|
function useTokenMap(tokens) {
|
|
627
831
|
const [map, setMap] = useState2({});
|
|
628
832
|
useEffect2(() => {
|
|
@@ -634,7 +838,7 @@ function useTokenMap(tokens) {
|
|
|
634
838
|
return map;
|
|
635
839
|
}
|
|
636
840
|
function SectionLabel({ children }) {
|
|
637
|
-
return /* @__PURE__ */
|
|
841
|
+
return /* @__PURE__ */ jsx9("p", { style: {
|
|
638
842
|
fontFamily: "var(--brand-font-mono)",
|
|
639
843
|
fontSize: "var(--brand-text-xs)",
|
|
640
844
|
letterSpacing: "0.1em",
|
|
@@ -649,24 +853,24 @@ function Section({ label, title, description, children, first }) {
|
|
|
649
853
|
paddingTop: first ? 0 : "var(--sp-24)",
|
|
650
854
|
borderTop: first ? "none" : "1px solid var(--border-subtle)"
|
|
651
855
|
}, children: [
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
description && /* @__PURE__ */
|
|
856
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: "var(--brand-text-xs)", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: label }),
|
|
857
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-2xl)", fontWeight: 700, color: "var(--text-primary)", marginBottom: "var(--sp-2)" }, children: title }),
|
|
858
|
+
description && /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", marginBottom: "var(--sp-8)", maxWidth: 480 }, children: description }),
|
|
655
859
|
children
|
|
656
860
|
] });
|
|
657
861
|
}
|
|
658
862
|
function ColorSwatch({ token, label, values }) {
|
|
659
863
|
return /* @__PURE__ */ jsxs5("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
|
|
660
|
-
/* @__PURE__ */
|
|
864
|
+
/* @__PURE__ */ jsx9("div", { style: { height: 56, background: `var(${token})` } }),
|
|
661
865
|
/* @__PURE__ */ jsxs5("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
|
|
662
|
-
/* @__PURE__ */
|
|
663
|
-
/* @__PURE__ */
|
|
664
|
-
values[token] && /* @__PURE__ */
|
|
866
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", fontWeight: 500, color: "var(--text-primary)", marginBottom: 2 }, children: label }),
|
|
867
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-muted)" }, children: token }),
|
|
868
|
+
values[token] && /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: values[token] })
|
|
665
869
|
] })
|
|
666
870
|
] });
|
|
667
871
|
}
|
|
668
872
|
function ColorGrid({ children }) {
|
|
669
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "var(--sp-3)" }, children });
|
|
670
874
|
}
|
|
671
875
|
var COLOR_TOKENS = [
|
|
672
876
|
"--bg-base",
|
|
@@ -765,110 +969,110 @@ function ComponentsSection() {
|
|
|
765
969
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
766
970
|
return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
|
|
767
971
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
768
|
-
/* @__PURE__ */
|
|
972
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Buttons" }),
|
|
769
973
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
|
|
770
|
-
/* @__PURE__ */
|
|
771
|
-
/* @__PURE__ */
|
|
772
|
-
/* @__PURE__ */
|
|
773
|
-
/* @__PURE__ */
|
|
974
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("primary"), children: "Deploy service" }),
|
|
975
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("secondary"), children: "View source" }),
|
|
976
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("ghost"), children: "Cancel" }),
|
|
977
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("danger"), children: "Delete" })
|
|
774
978
|
] }),
|
|
775
979
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
776
|
-
/* @__PURE__ */
|
|
777
|
-
/* @__PURE__ */
|
|
778
|
-
/* @__PURE__ */
|
|
980
|
+
/* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Small" }),
|
|
981
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("primary"), children: "Default" }),
|
|
982
|
+
/* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("lg") }, children: "Large" })
|
|
779
983
|
] })
|
|
780
984
|
] }),
|
|
781
985
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
782
|
-
/* @__PURE__ */
|
|
783
|
-
/* @__PURE__ */
|
|
986
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Badges" }),
|
|
987
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
784
988
|
{ label: "Default", bg: "var(--bg-overlay)", color: "var(--text-secondary)", border: "var(--border-soft)" },
|
|
785
989
|
{ label: "\u25CF Live", bg: "var(--accent-subtle)", color: "var(--accent-bright)", border: "var(--accent-border)" },
|
|
786
990
|
{ label: "\u25CF Active", bg: "var(--success-bg)", color: "var(--success)", border: "var(--success-border)" },
|
|
787
991
|
{ label: "\u25CF Degraded", bg: "var(--warning-bg)", color: "var(--warning)", border: "var(--warning-border)" },
|
|
788
992
|
{ label: "\u25CF Offline", bg: "var(--error-bg)", color: "var(--error)", border: "var(--error-border)" }
|
|
789
|
-
].map((b) => /* @__PURE__ */
|
|
993
|
+
].map((b) => /* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 10, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase", padding: "3px 8px", borderRadius: "var(--brand-radius-sm)", background: b.bg, color: b.color, border: `1px solid ${b.border}` }, children: b.label }, b.label)) })
|
|
790
994
|
] }),
|
|
791
995
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
792
|
-
/* @__PURE__ */
|
|
793
|
-
/* @__PURE__ */
|
|
996
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Cards" }),
|
|
997
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
794
998
|
{ icon: "\u{1F510}", title: "Auth Service", body: "JWT-based auth with refresh tokens, OAuth2, and session management." },
|
|
795
999
|
{ icon: "\u{1F4B3}", title: "Payments", body: "Stripe-powered billing with webhooks, subscriptions, and invoicing." },
|
|
796
1000
|
{ icon: "\u{1F4E8}", title: "Notifications", body: "Email, push, and in-app notification service with templates." }
|
|
797
1001
|
].map((card) => /* @__PURE__ */ jsxs5("div", { style: { background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-6)" }, children: [
|
|
798
|
-
/* @__PURE__ */
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
1002
|
+
/* @__PURE__ */ jsx9("div", { style: { width: 36, height: 36, borderRadius: "var(--brand-radius-md)", background: "var(--accent-subtle)", border: "1px solid var(--accent-border)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "var(--sp-4)", fontSize: 16 }, children: card.icon }),
|
|
1003
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 600, color: "var(--text-primary)", marginBottom: "var(--sp-2)" }, children: card.title }),
|
|
1004
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.6 }, children: card.body })
|
|
801
1005
|
] }, card.title)) })
|
|
802
1006
|
] }),
|
|
803
1007
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
804
|
-
/* @__PURE__ */
|
|
1008
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Form Inputs" }),
|
|
805
1009
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
|
|
806
1010
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
807
|
-
/* @__PURE__ */
|
|
808
|
-
/* @__PURE__ */
|
|
1011
|
+
/* @__PURE__ */ jsx9("label", { style: labelStyle, children: "Project name" }),
|
|
1012
|
+
/* @__PURE__ */ jsx9("input", { readOnly: true, style: inputStyle(), placeholder: "my-awesome-app", defaultValue: "" })
|
|
809
1013
|
] }),
|
|
810
1014
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
811
|
-
/* @__PURE__ */
|
|
812
|
-
/* @__PURE__ */
|
|
813
|
-
/* @__PURE__ */
|
|
1015
|
+
/* @__PURE__ */ jsx9("label", { style: labelStyle, children: "API Key" }),
|
|
1016
|
+
/* @__PURE__ */ jsx9("input", { readOnly: true, style: { ...inputStyle(), ...mono, fontSize: 13 }, defaultValue: "ag_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u20223fa2" }),
|
|
1017
|
+
/* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: "var(--text-muted)" }, children: "Keep this secret. Rotate from the dashboard." })
|
|
814
1018
|
] }),
|
|
815
1019
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
816
|
-
/* @__PURE__ */
|
|
817
|
-
/* @__PURE__ */
|
|
818
|
-
/* @__PURE__ */
|
|
1020
|
+
/* @__PURE__ */ jsx9("label", { style: labelStyle, children: "Status" }),
|
|
1021
|
+
/* @__PURE__ */ jsx9("input", { readOnly: true, style: inputStyle("error"), defaultValue: "invalid-slug!" }),
|
|
1022
|
+
/* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: "var(--error)" }, children: "Only lowercase letters, numbers, and hyphens." })
|
|
819
1023
|
] })
|
|
820
1024
|
] })
|
|
821
1025
|
] }),
|
|
822
1026
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
823
|
-
/* @__PURE__ */
|
|
1027
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Code Block" }),
|
|
824
1028
|
/* @__PURE__ */ jsxs5("div", { style: { ...mono, background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-lg)", padding: "var(--sp-5) var(--sp-6)", fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.8, overflowX: "auto" }, children: [
|
|
825
|
-
/* @__PURE__ */
|
|
1029
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--text-disabled)" }, children: "// Initialize AG Auth" }),
|
|
826
1030
|
"\n",
|
|
827
|
-
/* @__PURE__ */
|
|
1031
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "import" }),
|
|
828
1032
|
" { createClient } ",
|
|
829
|
-
/* @__PURE__ */
|
|
1033
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "from" }),
|
|
830
1034
|
" ",
|
|
831
|
-
/* @__PURE__ */
|
|
1035
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--success)" }, children: "'@ag/auth'" }),
|
|
832
1036
|
"\n\n",
|
|
833
|
-
/* @__PURE__ */
|
|
1037
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "const" }),
|
|
834
1038
|
" auth = ",
|
|
835
|
-
/* @__PURE__ */
|
|
1039
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--info)" }, children: "createClient" }),
|
|
836
1040
|
"({\n",
|
|
837
1041
|
" projectId: ",
|
|
838
|
-
/* @__PURE__ */
|
|
1042
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--success)" }, children: "'proj_xxxxxxxx'" }),
|
|
839
1043
|
",\n",
|
|
840
1044
|
" secret: process.env.",
|
|
841
|
-
/* @__PURE__ */
|
|
1045
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--info)" }, children: "AG_SECRET" }),
|
|
842
1046
|
",\n",
|
|
843
1047
|
" ttl: ",
|
|
844
|
-
/* @__PURE__ */
|
|
1048
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--warning)" }, children: "3600" }),
|
|
845
1049
|
",\n",
|
|
846
1050
|
"})\n\n",
|
|
847
|
-
/* @__PURE__ */
|
|
1051
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "export default" }),
|
|
848
1052
|
" auth"
|
|
849
1053
|
] })
|
|
850
1054
|
] }),
|
|
851
1055
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
852
|
-
/* @__PURE__ */
|
|
1056
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Navigation" }),
|
|
853
1057
|
/* @__PURE__ */ jsxs5("div", { style: { background: "rgba(10,10,11,0.8)", backdropFilter: "blur(12px)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-3) var(--sp-5)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
854
1058
|
/* @__PURE__ */ jsxs5("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)", display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
855
1059
|
/* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
|
|
856
|
-
/* @__PURE__ */
|
|
857
|
-
/* @__PURE__ */
|
|
858
|
-
/* @__PURE__ */
|
|
859
|
-
/* @__PURE__ */
|
|
1060
|
+
/* @__PURE__ */ jsx9("path", { d: "M4 18 L9 6 L14 18", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
1061
|
+
/* @__PURE__ */ jsx9("line", { x1: "6", y1: "14", x2: "12", y2: "14", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
1062
|
+
/* @__PURE__ */ jsx9("path", { d: "M16 10C16 8 17.5 7 19 7C20.5 7 22 8 22 10L22 12L19.5 12", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
1063
|
+
/* @__PURE__ */ jsx9("path", { d: "M16 10C16 12 16 14 16 15C16 16.5 17.5 17 19 17C20.5 17 22 16.5 22 15L22 12", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
860
1064
|
] }),
|
|
861
1065
|
"Adarsh"
|
|
862
1066
|
] }),
|
|
863
|
-
/* @__PURE__ */
|
|
1067
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: "var(--sp-6)", listStyle: "none" }, children: ["Work", "Services", "Blog", "Contact"].map((link, i) => /* @__PURE__ */ jsx9("span", { style: { fontSize: "var(--brand-text-sm)", color: i === 0 ? "var(--accent-bright)" : "var(--text-secondary)", cursor: "pointer" }, children: link }, link)) }),
|
|
864
1068
|
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
865
|
-
/* @__PURE__ */
|
|
866
|
-
/* @__PURE__ */
|
|
1069
|
+
/* @__PURE__ */ jsx9(ThemeToggle, {}),
|
|
1070
|
+
/* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Hire me" })
|
|
867
1071
|
] })
|
|
868
1072
|
] })
|
|
869
1073
|
] }),
|
|
870
1074
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
871
|
-
/* @__PURE__ */
|
|
1075
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Tooltip" }),
|
|
872
1076
|
/* @__PURE__ */ jsxs5(
|
|
873
1077
|
"div",
|
|
874
1078
|
{
|
|
@@ -876,15 +1080,15 @@ function ComponentsSection() {
|
|
|
876
1080
|
onMouseEnter: () => setTooltipVisible(true),
|
|
877
1081
|
onMouseLeave: () => setTooltipVisible(false),
|
|
878
1082
|
children: [
|
|
879
|
-
/* @__PURE__ */
|
|
880
|
-
tooltipVisible && /* @__PURE__ */
|
|
1083
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("secondary"), children: "Hover me" }),
|
|
1084
|
+
tooltipVisible && /* @__PURE__ */ jsx9("div", { style: { position: "absolute", bottom: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)", background: "var(--bg-overlay)", border: "1px solid var(--border-soft)", borderRadius: "var(--brand-radius-md)", padding: "var(--sp-2) var(--sp-3)", fontSize: 11, color: "var(--text-secondary)", whiteSpace: "nowrap", boxShadow: "var(--brand-shadow-md)", zIndex: 10, pointerEvents: "none" }, children: "Triggers on hover \xB7 120ms delay" })
|
|
881
1085
|
]
|
|
882
1086
|
}
|
|
883
1087
|
)
|
|
884
1088
|
] }),
|
|
885
1089
|
/* @__PURE__ */ jsxs5("div", { children: [
|
|
886
|
-
/* @__PURE__ */
|
|
887
|
-
/* @__PURE__ */
|
|
1090
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Tags" }),
|
|
1091
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-2)" }, children: ["typescript", "react", "node.js", "postgres", "redis", "docker"].map((tag) => /* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", background: "var(--bg-overlay)", border: "1px solid var(--border-subtle)", padding: "2px 8px", borderRadius: "var(--brand-radius-sm)", display: "inline-block" }, children: tag }, tag)) })
|
|
888
1092
|
] })
|
|
889
1093
|
] });
|
|
890
1094
|
}
|
|
@@ -936,7 +1140,7 @@ function ThemePage({ version = package_default.version }) {
|
|
|
936
1140
|
const colorValues = useTokenMap(COLOR_TOKENS);
|
|
937
1141
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
938
1142
|
const dot = { width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block" };
|
|
939
|
-
return /* @__PURE__ */
|
|
1143
|
+
return /* @__PURE__ */ jsx9("div", { style: {
|
|
940
1144
|
background: "var(--bg-base)",
|
|
941
1145
|
color: "var(--text-primary)",
|
|
942
1146
|
fontFamily: "var(--brand-font-body)",
|
|
@@ -946,7 +1150,7 @@ function ThemePage({ version = package_default.version }) {
|
|
|
946
1150
|
minHeight: "100vh"
|
|
947
1151
|
}, children: /* @__PURE__ */ jsxs5("div", { style: { maxWidth: "var(--brand-layout-container-max)", margin: "0 auto", padding: "var(--sp-16) var(--sp-8)" }, children: [
|
|
948
1152
|
/* @__PURE__ */ jsxs5("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
|
|
949
|
-
/* @__PURE__ */
|
|
1153
|
+
/* @__PURE__ */ jsx9("div", { style: {
|
|
950
1154
|
position: "absolute",
|
|
951
1155
|
top: -80,
|
|
952
1156
|
left: -120,
|
|
@@ -956,7 +1160,7 @@ function ThemePage({ version = package_default.version }) {
|
|
|
956
1160
|
pointerEvents: "none"
|
|
957
1161
|
} }),
|
|
958
1162
|
/* @__PURE__ */ jsxs5("div", { style: { ...mono, fontSize: "var(--brand-text-xs)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "var(--sp-6)", display: "flex", alignItems: "center", gap: "var(--sp-3)", position: "relative" }, children: [
|
|
959
|
-
/* @__PURE__ */
|
|
1163
|
+
/* @__PURE__ */ jsx9("span", { style: { width: 24, height: 1, background: "var(--border-mid)", display: "inline-block" } }),
|
|
960
1164
|
"@adarsh_goswami/brand",
|
|
961
1165
|
version && /* @__PURE__ */ jsxs5("span", { style: { background: "var(--accent-subtle)", color: "var(--accent)", border: "1px solid var(--accent-border)", borderRadius: "var(--brand-radius-sm)", padding: "2px 8px", fontSize: 10 }, children: [
|
|
962
1166
|
"v",
|
|
@@ -964,122 +1168,122 @@ function ThemePage({ version = package_default.version }) {
|
|
|
964
1168
|
] })
|
|
965
1169
|
] }),
|
|
966
1170
|
/* @__PURE__ */ jsxs5("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "clamp(3rem, 8vw, 5rem)", fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.03em", marginBottom: "var(--sp-6)", position: "relative" }, children: [
|
|
967
|
-
/* @__PURE__ */
|
|
968
|
-
/* @__PURE__ */
|
|
969
|
-
/* @__PURE__ */
|
|
1171
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--text-primary)" }, children: "Design" }),
|
|
1172
|
+
/* @__PURE__ */ jsx9("br", {}),
|
|
1173
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent)" }, children: "System" })
|
|
970
1174
|
] }),
|
|
971
|
-
/* @__PURE__ */
|
|
972
|
-
/* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
1175
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-md)", color: "var(--text-secondary)", fontWeight: 300, maxWidth: 420, lineHeight: 1.7, position: "relative" }, children: "The single source of truth for all brand decisions \u2014 colors, typography, spacing, and motion." }),
|
|
1176
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, marginTop: "var(--sp-10)", display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--sp-6)", fontSize: "var(--brand-text-xs)", color: "var(--text-muted)", letterSpacing: "0.06em", position: "relative" }, children: ["Radix UI", "Tailwind CSS", "TypeScript"].map((tech) => /* @__PURE__ */ jsxs5("span", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
1177
|
+
/* @__PURE__ */ jsx9("span", { style: dot }),
|
|
974
1178
|
tech
|
|
975
1179
|
] }, tech)) })
|
|
976
1180
|
] }),
|
|
977
|
-
/* @__PURE__ */
|
|
1181
|
+
/* @__PURE__ */ jsx9(Section, { label: "01 \u2014 Identity", title: "Logo & Mark", description: "The AG monogram is built from geometric forms \u2014 two interlocked letterforms on a contained grid.", first: true, children: /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
978
1182
|
/* @__PURE__ */ jsxs5("div", { style: logoCardStyle("dark"), children: [
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
1183
|
+
/* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "dark" }),
|
|
1184
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Primary \u2014 Dark" })
|
|
981
1185
|
] }),
|
|
982
1186
|
/* @__PURE__ */ jsxs5("div", { style: logoCardStyle("glow"), children: [
|
|
983
|
-
/* @__PURE__ */
|
|
984
|
-
/* @__PURE__ */
|
|
1187
|
+
/* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "glow" }),
|
|
1188
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Glow Variant" })
|
|
985
1189
|
] }),
|
|
986
1190
|
/* @__PURE__ */ jsxs5("div", { style: logoCardStyle("light"), children: [
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
1191
|
+
/* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "light" }),
|
|
1192
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("light"), children: "Light Variant" })
|
|
989
1193
|
] }),
|
|
990
1194
|
/* @__PURE__ */ jsxs5("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
|
|
991
|
-
/* @__PURE__ */
|
|
992
|
-
/* @__PURE__ */
|
|
1195
|
+
/* @__PURE__ */ jsx9(AgWordmark, {}),
|
|
1196
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Wordmark" })
|
|
993
1197
|
] })
|
|
994
1198
|
] }) }),
|
|
995
1199
|
/* @__PURE__ */ jsxs5(Section, { label: "02 \u2014 Color", title: "Color System", description: "Dark-first palette anchored by a violet-indigo accent. All values resolve from theme.css.", children: [
|
|
996
|
-
/* @__PURE__ */
|
|
1200
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Accent" }),
|
|
997
1201
|
/* @__PURE__ */ jsxs5(ColorGrid, { children: [
|
|
998
|
-
/* @__PURE__ */
|
|
999
|
-
/* @__PURE__ */
|
|
1000
|
-
/* @__PURE__ */
|
|
1001
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-bright", label: "Bright", values: colorValues }),
|
|
1203
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent", label: "Base", values: colorValues }),
|
|
1204
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-dim", label: "Dim", values: colorValues }),
|
|
1205
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-glow", label: "Glow", values: colorValues })
|
|
1002
1206
|
] }),
|
|
1003
|
-
/* @__PURE__ */
|
|
1207
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Backgrounds" }),
|
|
1004
1208
|
/* @__PURE__ */ jsxs5(ColorGrid, { children: [
|
|
1005
|
-
/* @__PURE__ */
|
|
1006
|
-
/* @__PURE__ */
|
|
1007
|
-
/* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1209
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-base", label: "Base", values: colorValues }),
|
|
1210
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-surface", label: "Surface", values: colorValues }),
|
|
1211
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-raised", label: "Raised", values: colorValues }),
|
|
1212
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-overlay", label: "Overlay", values: colorValues })
|
|
1009
1213
|
] }),
|
|
1010
|
-
/* @__PURE__ */
|
|
1214
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Borders" }),
|
|
1011
1215
|
/* @__PURE__ */ jsxs5(ColorGrid, { children: [
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1216
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-subtle", label: "Subtle", values: colorValues }),
|
|
1217
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-soft", label: "Soft", values: colorValues }),
|
|
1218
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-mid", label: "Mid", values: colorValues })
|
|
1015
1219
|
] }),
|
|
1016
|
-
/* @__PURE__ */
|
|
1220
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Text" }),
|
|
1017
1221
|
/* @__PURE__ */ jsxs5(ColorGrid, { children: [
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1021
|
-
/* @__PURE__ */
|
|
1222
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-primary", label: "Primary", values: colorValues }),
|
|
1223
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-secondary", label: "Secondary", values: colorValues }),
|
|
1224
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-muted", label: "Muted", values: colorValues }),
|
|
1225
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-disabled", label: "Disabled", values: colorValues })
|
|
1022
1226
|
] }),
|
|
1023
|
-
/* @__PURE__ */
|
|
1227
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Semantic" }),
|
|
1024
1228
|
/* @__PURE__ */ jsxs5(ColorGrid, { children: [
|
|
1025
|
-
/* @__PURE__ */
|
|
1026
|
-
/* @__PURE__ */
|
|
1027
|
-
/* @__PURE__ */
|
|
1028
|
-
/* @__PURE__ */
|
|
1229
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--success", label: "Success", values: colorValues }),
|
|
1230
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--warning", label: "Warning", values: colorValues }),
|
|
1231
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--error", label: "Error", values: colorValues }),
|
|
1232
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--info", label: "Info", values: colorValues })
|
|
1029
1233
|
] })
|
|
1030
1234
|
] }),
|
|
1031
1235
|
/* @__PURE__ */ jsxs5(Section, { label: "03 \u2014 Typography", title: "Type System", description: "Syne for display and headings. DM Sans for body. DM Mono for code, labels, and data.", children: [
|
|
1032
|
-
/* @__PURE__ */
|
|
1033
|
-
/* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1035
|
-
/* @__PURE__ */
|
|
1236
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Families" }),
|
|
1237
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", marginBottom: "var(--sp-8)" }, children: FONT_FAMILIES.map(({ token, cssFamily, weight, sample }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-4) var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--sp-4)", flexWrap: "wrap" }, children: [
|
|
1238
|
+
/* @__PURE__ */ jsx9("span", { style: { fontFamily: cssFamily, fontWeight: weight, fontSize: "var(--brand-text-lg)", color: "var(--text-primary)" }, children: sample }),
|
|
1239
|
+
/* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }, children: token })
|
|
1036
1240
|
] }, token)) }),
|
|
1037
|
-
/* @__PURE__ */
|
|
1038
|
-
/* @__PURE__ */
|
|
1241
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Scale" }),
|
|
1242
|
+
/* @__PURE__ */ jsx9("div", { children: TYPE_SCALE.map(({ token, label, role, weight, family }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--sp-6)", padding: "var(--sp-5) 0", borderBottom: "1px solid var(--border-subtle)" }, children: [
|
|
1039
1243
|
/* @__PURE__ */ jsxs5("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
|
|
1040
|
-
/* @__PURE__ */
|
|
1041
|
-
/* @__PURE__ */
|
|
1042
|
-
/* @__PURE__ */
|
|
1244
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }, children: token }),
|
|
1245
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: label }),
|
|
1246
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: role })
|
|
1043
1247
|
] }),
|
|
1044
|
-
/* @__PURE__ */
|
|
1248
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: fontFamilyVar(family), fontSize: `var(${token})`, fontWeight: weight, color: "var(--text-primary)", lineHeight: 1.2 }, children: TYPE_SPECIMENS[token] })
|
|
1045
1249
|
] }, token)) })
|
|
1046
1250
|
] }),
|
|
1047
|
-
/* @__PURE__ */
|
|
1048
|
-
/* @__PURE__ */
|
|
1049
|
-
/* @__PURE__ */
|
|
1050
|
-
/* @__PURE__ */
|
|
1051
|
-
/* @__PURE__ */
|
|
1251
|
+
/* @__PURE__ */ jsx9(Section, { label: "04 \u2014 Spacing", title: "Spacing Scale", description: "8px base grid. All values are multiples of 4px for sub-grid alignment.", children: /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: SPACING.map(({ token, rem, px }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-4)" }, children: [
|
|
1252
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 70 }, children: token }),
|
|
1253
|
+
/* @__PURE__ */ jsx9("div", { style: { flex: 1, height: 24, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9("div", { style: { height: 8, width: `var(${token})`, background: "var(--accent)", borderRadius: 2, opacity: 0.7 } }) }),
|
|
1254
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-secondary)", minWidth: 50 }, children: rem }),
|
|
1255
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 40 }, children: px })
|
|
1052
1256
|
] }, token)) }) }),
|
|
1053
|
-
/* @__PURE__ */
|
|
1054
|
-
/* @__PURE__ */
|
|
1257
|
+
/* @__PURE__ */ jsx9(Section, { label: "05 \u2014 Shape", title: "Border Radius", description: "Consistent corner radii for a cohesive, modern feel across all components.", children: /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "var(--sp-4)" }, children: RADII.map(({ token, label, value }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
1258
|
+
/* @__PURE__ */ jsx9("div", { style: { width: 64, height: 64, background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: `var(${token})` } }),
|
|
1055
1259
|
/* @__PURE__ */ jsxs5("div", { style: { textAlign: "center" }, children: [
|
|
1056
|
-
/* @__PURE__ */
|
|
1057
|
-
/* @__PURE__ */
|
|
1260
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)" }, children: label }),
|
|
1261
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: value })
|
|
1058
1262
|
] })
|
|
1059
1263
|
] }, token)) }) }),
|
|
1060
|
-
/* @__PURE__ */
|
|
1061
|
-
/* @__PURE__ */
|
|
1062
|
-
/* @__PURE__ */
|
|
1063
|
-
/* @__PURE__ */
|
|
1264
|
+
/* @__PURE__ */ jsx9(Section, { label: "06 \u2014 Elevation", title: "Shadows", description: "Four shadow levels including an accent glow.", children: /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-6)" }, children: SHADOWS.map(({ token, label, desc }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-8)", background: "var(--bg-surface)", borderRadius: "var(--brand-radius-lg)", boxShadow: `var(${token})` }, children: [
|
|
1265
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-1)" }, children: token }),
|
|
1266
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-secondary)", marginBottom: "var(--sp-1)" }, children: label }),
|
|
1267
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-muted)" }, children: desc })
|
|
1064
1268
|
] }, token)) }) }),
|
|
1065
|
-
/* @__PURE__ */
|
|
1269
|
+
/* @__PURE__ */ jsx9(Section, { label: "07 \u2014 Components", title: "UI Components", description: "Core interactive elements built from the token system above.", children: /* @__PURE__ */ jsx9(ComponentsSection, {}) }),
|
|
1066
1270
|
/* @__PURE__ */ jsxs5(Section, { label: "08 \u2014 Motion", title: "Animation Tokens", description: "Subtle, purposeful motion. Never decorative \u2014 always communicates state or hierarchy.", children: [
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
-
/* @__PURE__ */
|
|
1072
|
-
/* @__PURE__ */
|
|
1271
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Easing" }),
|
|
1272
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)", marginBottom: "var(--sp-6)" }, children: EASINGS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
|
|
1273
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1274
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)" }, children: label }),
|
|
1275
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: value }),
|
|
1276
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1073
1277
|
] }, token)) }),
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */
|
|
1076
|
-
/* @__PURE__ */
|
|
1077
|
-
/* @__PURE__ */
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Duration" }),
|
|
1279
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: DURATIONS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
|
|
1280
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1281
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-xl)", fontWeight: 700, color: "var(--text-primary)" }, children: value }),
|
|
1282
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: label }),
|
|
1283
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1080
1284
|
] }, token)) })
|
|
1081
1285
|
] }),
|
|
1082
|
-
/* @__PURE__ */
|
|
1286
|
+
/* @__PURE__ */ jsx9(Footer, {})
|
|
1083
1287
|
] }) });
|
|
1084
1288
|
}
|
|
1085
1289
|
function logoCardStyle(bg) {
|
|
@@ -1124,6 +1328,7 @@ var favicon_default = 'data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" x
|
|
|
1124
1328
|
export {
|
|
1125
1329
|
AgMark,
|
|
1126
1330
|
AgWordmark,
|
|
1331
|
+
BlogPost,
|
|
1127
1332
|
DocsLayout,
|
|
1128
1333
|
Footer,
|
|
1129
1334
|
ThemePage,
|