@adarsh_goswami/design 0.1.13-dev → 0.1.14-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 +530 -294
- package/dist/index.css +68 -0
- package/dist/index.d.cts +11 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +526 -291
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,12 +1,246 @@
|
|
|
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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
function calcReadingTime(content) {
|
|
8
|
+
const words = content.trim().split(/\s+/).filter(Boolean).length;
|
|
9
|
+
return Math.ceil(words / 200);
|
|
10
|
+
}
|
|
11
|
+
var markdownComponents = {
|
|
12
|
+
h1: ({ children }) => /* @__PURE__ */ jsx(
|
|
13
|
+
Heading,
|
|
14
|
+
{
|
|
15
|
+
as: "h1",
|
|
16
|
+
size: "7",
|
|
17
|
+
mb: "4",
|
|
18
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
19
|
+
children
|
|
20
|
+
}
|
|
21
|
+
),
|
|
22
|
+
h2: ({ children }) => /* @__PURE__ */ jsx(
|
|
23
|
+
Heading,
|
|
24
|
+
{
|
|
25
|
+
as: "h2",
|
|
26
|
+
size: "5",
|
|
27
|
+
mb: "3",
|
|
28
|
+
mt: "6",
|
|
29
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
30
|
+
children
|
|
31
|
+
}
|
|
32
|
+
),
|
|
33
|
+
h3: ({ children }) => /* @__PURE__ */ jsx(
|
|
34
|
+
Heading,
|
|
35
|
+
{
|
|
36
|
+
as: "h3",
|
|
37
|
+
size: "4",
|
|
38
|
+
mb: "2",
|
|
39
|
+
mt: "5",
|
|
40
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-secondary)" },
|
|
41
|
+
children
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
p: ({ children }) => /* @__PURE__ */ jsx(
|
|
45
|
+
Text,
|
|
46
|
+
{
|
|
47
|
+
as: "p",
|
|
48
|
+
size: "3",
|
|
49
|
+
mb: "4",
|
|
50
|
+
style: {
|
|
51
|
+
fontFamily: "var(--brand-font-body)",
|
|
52
|
+
color: "var(--text-secondary)",
|
|
53
|
+
lineHeight: "var(--brand-leading-relaxed)",
|
|
54
|
+
display: "block"
|
|
55
|
+
},
|
|
56
|
+
children
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
a: ({ href, children }) => /* @__PURE__ */ jsx("a", { href: href ?? "#", style: { color: "var(--accent)", textDecoration: "underline" }, children }),
|
|
60
|
+
code: ({ className, children }) => {
|
|
61
|
+
const isBlock = className?.startsWith("language-");
|
|
62
|
+
if (isBlock) {
|
|
63
|
+
return /* @__PURE__ */ jsx(
|
|
64
|
+
Box,
|
|
65
|
+
{
|
|
66
|
+
mb: "4",
|
|
67
|
+
style: {
|
|
68
|
+
borderRadius: "var(--brand-radius-lg)",
|
|
69
|
+
border: "1px solid var(--border-soft)",
|
|
70
|
+
backgroundColor: "var(--bg-raised)",
|
|
71
|
+
overflowX: "auto"
|
|
72
|
+
},
|
|
73
|
+
children: /* @__PURE__ */ jsx(
|
|
74
|
+
"code",
|
|
75
|
+
{
|
|
76
|
+
className: className ?? "",
|
|
77
|
+
style: {
|
|
78
|
+
display: "block",
|
|
79
|
+
padding: "var(--sp-4)",
|
|
80
|
+
fontSize: "var(--brand-text-sm)",
|
|
81
|
+
fontFamily: "var(--brand-font-mono)",
|
|
82
|
+
color: "var(--text-primary)"
|
|
83
|
+
},
|
|
84
|
+
children
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
return /* @__PURE__ */ jsx(
|
|
91
|
+
"code",
|
|
92
|
+
{
|
|
93
|
+
style: {
|
|
94
|
+
backgroundColor: "var(--bg-raised)",
|
|
95
|
+
color: "var(--accent-bright)",
|
|
96
|
+
borderRadius: "var(--brand-radius-sm)",
|
|
97
|
+
padding: "2px 6px",
|
|
98
|
+
fontSize: "var(--brand-text-sm)",
|
|
99
|
+
fontFamily: "var(--brand-font-mono)"
|
|
100
|
+
},
|
|
101
|
+
children
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
},
|
|
105
|
+
ul: ({ children }) => /* @__PURE__ */ jsx(
|
|
106
|
+
"ul",
|
|
107
|
+
{
|
|
108
|
+
style: {
|
|
109
|
+
marginBottom: "var(--sp-4)",
|
|
110
|
+
paddingLeft: "var(--sp-4)",
|
|
111
|
+
listStyleType: "disc",
|
|
112
|
+
color: "var(--text-secondary)",
|
|
113
|
+
fontFamily: "var(--brand-font-body)"
|
|
114
|
+
},
|
|
115
|
+
children
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
ol: ({ children }) => /* @__PURE__ */ jsx(
|
|
119
|
+
"ol",
|
|
120
|
+
{
|
|
121
|
+
style: {
|
|
122
|
+
marginBottom: "var(--sp-4)",
|
|
123
|
+
paddingLeft: "var(--sp-4)",
|
|
124
|
+
listStyleType: "decimal",
|
|
125
|
+
color: "var(--text-secondary)",
|
|
126
|
+
fontFamily: "var(--brand-font-body)"
|
|
127
|
+
},
|
|
128
|
+
children
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
li: ({ children }) => /* @__PURE__ */ jsx(
|
|
132
|
+
Text,
|
|
133
|
+
{
|
|
134
|
+
as: "p",
|
|
135
|
+
size: "3",
|
|
136
|
+
mb: "1",
|
|
137
|
+
style: {
|
|
138
|
+
fontFamily: "var(--brand-font-body)",
|
|
139
|
+
color: "var(--text-secondary)",
|
|
140
|
+
display: "list-item"
|
|
141
|
+
},
|
|
142
|
+
children
|
|
143
|
+
}
|
|
144
|
+
),
|
|
145
|
+
blockquote: ({ children }) => /* @__PURE__ */ jsx(
|
|
146
|
+
Box,
|
|
147
|
+
{
|
|
148
|
+
mb: "4",
|
|
149
|
+
pl: "4",
|
|
150
|
+
py: "2",
|
|
151
|
+
style: {
|
|
152
|
+
borderLeft: "2px solid var(--accent)",
|
|
153
|
+
backgroundColor: "var(--accent-subtle)",
|
|
154
|
+
borderRadius: "0 var(--brand-radius-md) var(--brand-radius-md) 0"
|
|
155
|
+
},
|
|
156
|
+
children
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
table: ({ children }) => /* @__PURE__ */ jsx(Box, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx(
|
|
160
|
+
"table",
|
|
161
|
+
{
|
|
162
|
+
style: {
|
|
163
|
+
width: "100%",
|
|
164
|
+
borderCollapse: "collapse",
|
|
165
|
+
fontSize: "var(--brand-text-sm)",
|
|
166
|
+
fontFamily: "var(--brand-font-body)"
|
|
167
|
+
},
|
|
168
|
+
children
|
|
169
|
+
}
|
|
170
|
+
) }),
|
|
171
|
+
th: ({ children }) => /* @__PURE__ */ jsx(
|
|
172
|
+
"th",
|
|
173
|
+
{
|
|
174
|
+
style: {
|
|
175
|
+
textAlign: "left",
|
|
176
|
+
padding: "8px 12px",
|
|
177
|
+
borderBottom: "1px solid var(--border-mid)",
|
|
178
|
+
color: "var(--text-primary)",
|
|
179
|
+
fontWeight: 500
|
|
180
|
+
},
|
|
181
|
+
children
|
|
182
|
+
}
|
|
183
|
+
),
|
|
184
|
+
td: ({ children }) => /* @__PURE__ */ jsx(
|
|
185
|
+
"td",
|
|
186
|
+
{
|
|
187
|
+
style: {
|
|
188
|
+
padding: "8px 12px",
|
|
189
|
+
borderBottom: "1px solid var(--border-subtle)",
|
|
190
|
+
color: "var(--text-secondary)"
|
|
191
|
+
},
|
|
192
|
+
children
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
hr: () => /* @__PURE__ */ jsx(Flex, { my: "6", children: /* @__PURE__ */ jsx(Separator, { size: "4" }) })
|
|
196
|
+
};
|
|
197
|
+
function BlogPost({
|
|
198
|
+
title,
|
|
199
|
+
date,
|
|
200
|
+
tags = [],
|
|
201
|
+
content,
|
|
202
|
+
readingTime,
|
|
203
|
+
onBack
|
|
204
|
+
}) {
|
|
205
|
+
const minutes = readingTime ?? calcReadingTime(content);
|
|
206
|
+
return /* @__PURE__ */ jsxs("article", { className: "blog-post", children: [
|
|
207
|
+
onBack && /* @__PURE__ */ jsx("button", { className: "blog-post__back", onClick: onBack, children: "\u2190 Back" }),
|
|
208
|
+
/* @__PURE__ */ jsxs("header", { children: [
|
|
209
|
+
/* @__PURE__ */ jsx("h1", { className: "blog-post__title", children: title }),
|
|
210
|
+
/* @__PURE__ */ jsxs("div", { className: "blog-post__meta", children: [
|
|
211
|
+
/* @__PURE__ */ jsx("span", { className: "blog-post__meta-text", children: date }),
|
|
212
|
+
/* @__PURE__ */ jsx("span", { className: "blog-post__meta-dot", children: "\xB7" }),
|
|
213
|
+
/* @__PURE__ */ jsxs("span", { className: "blog-post__meta-text", children: [
|
|
214
|
+
minutes,
|
|
215
|
+
" min read"
|
|
216
|
+
] }),
|
|
217
|
+
tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
218
|
+
/* @__PURE__ */ jsx("span", { className: "blog-post__meta-dot", children: "\xB7" }),
|
|
219
|
+
/* @__PURE__ */ jsx("div", { className: "blog-post__tags", children: tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "blog-post__tag", children: tag }, tag)) })
|
|
220
|
+
] })
|
|
221
|
+
] })
|
|
222
|
+
] }),
|
|
223
|
+
/* @__PURE__ */ jsx(
|
|
224
|
+
ReactMarkdown,
|
|
225
|
+
{
|
|
226
|
+
remarkPlugins: [remarkGfm],
|
|
227
|
+
rehypePlugins: [rehypeHighlight],
|
|
228
|
+
components: markdownComponents,
|
|
229
|
+
children: content
|
|
230
|
+
}
|
|
231
|
+
)
|
|
232
|
+
] });
|
|
233
|
+
}
|
|
234
|
+
|
|
1
235
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
2
|
-
import { Badge as Badge2, Box as
|
|
236
|
+
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
237
|
|
|
4
238
|
// 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";
|
|
239
|
+
import { Badge, Box as Box2, Flex as Flex2, Heading as Heading2, ScrollArea, Separator as Separator2, Text as Text2 } from "@radix-ui/themes";
|
|
240
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
7
241
|
function NavStatusBadge({ status }) {
|
|
8
242
|
if (status === "final") return null;
|
|
9
|
-
return /* @__PURE__ */
|
|
243
|
+
return /* @__PURE__ */ jsx2(Badge, { size: "1", variant: "soft", color: status === "draft" ? "yellow" : "gray", children: status });
|
|
10
244
|
}
|
|
11
245
|
function NavLeaf({
|
|
12
246
|
id,
|
|
@@ -18,14 +252,14 @@ function NavLeaf({
|
|
|
18
252
|
}) {
|
|
19
253
|
const isActive = slug === activeSlug;
|
|
20
254
|
const isDeprecated = status === "deprecated";
|
|
21
|
-
return /* @__PURE__ */
|
|
255
|
+
return /* @__PURE__ */ jsx2(Box2, { mb: "1", children: /* @__PURE__ */ jsx2(
|
|
22
256
|
"button",
|
|
23
257
|
{
|
|
24
258
|
type: "button",
|
|
25
259
|
onClick: () => onSlugChange(slug),
|
|
26
260
|
style: { width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0 },
|
|
27
|
-
children: /* @__PURE__ */
|
|
28
|
-
|
|
261
|
+
children: /* @__PURE__ */ jsxs2(
|
|
262
|
+
Flex2,
|
|
29
263
|
{
|
|
30
264
|
align: "center",
|
|
31
265
|
justify: "between",
|
|
@@ -38,8 +272,8 @@ function NavLeaf({
|
|
|
38
272
|
].join(" "),
|
|
39
273
|
style: { minHeight: "30px" },
|
|
40
274
|
children: [
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
|
|
275
|
+
/* @__PURE__ */ jsx2(
|
|
276
|
+
Text2,
|
|
43
277
|
{
|
|
44
278
|
as: "span",
|
|
45
279
|
size: "2",
|
|
@@ -51,7 +285,7 @@ function NavLeaf({
|
|
|
51
285
|
children: label
|
|
52
286
|
}
|
|
53
287
|
),
|
|
54
|
-
status && /* @__PURE__ */
|
|
288
|
+
status && /* @__PURE__ */ jsx2(NavStatusBadge, { status })
|
|
55
289
|
]
|
|
56
290
|
}
|
|
57
291
|
)
|
|
@@ -64,7 +298,7 @@ function NavItemRow({
|
|
|
64
298
|
onSlugChange
|
|
65
299
|
}) {
|
|
66
300
|
if (item.slug) {
|
|
67
|
-
return /* @__PURE__ */
|
|
301
|
+
return /* @__PURE__ */ jsx2(
|
|
68
302
|
NavLeaf,
|
|
69
303
|
{
|
|
70
304
|
id: item.id,
|
|
@@ -76,10 +310,10 @@ function NavItemRow({
|
|
|
76
310
|
}
|
|
77
311
|
);
|
|
78
312
|
}
|
|
79
|
-
return /* @__PURE__ */
|
|
80
|
-
/* @__PURE__ */
|
|
81
|
-
/* @__PURE__ */
|
|
82
|
-
|
|
313
|
+
return /* @__PURE__ */ jsxs2(Box2, { mb: "1", children: [
|
|
314
|
+
/* @__PURE__ */ jsxs2(Flex2, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
|
|
315
|
+
/* @__PURE__ */ jsx2(
|
|
316
|
+
Text2,
|
|
83
317
|
{
|
|
84
318
|
as: "p",
|
|
85
319
|
size: "2",
|
|
@@ -92,9 +326,9 @@ function NavItemRow({
|
|
|
92
326
|
children: item.label
|
|
93
327
|
}
|
|
94
328
|
),
|
|
95
|
-
item.status && /* @__PURE__ */
|
|
329
|
+
item.status && /* @__PURE__ */ jsx2(NavStatusBadge, { status: item.status })
|
|
96
330
|
] }),
|
|
97
|
-
item.children && item.children.length > 0 && /* @__PURE__ */
|
|
331
|
+
item.children && item.children.length > 0 && /* @__PURE__ */ jsx2(Box2, { pl: "3", children: item.children.map((child) => /* @__PURE__ */ jsx2(
|
|
98
332
|
NavLeaf,
|
|
99
333
|
{
|
|
100
334
|
id: child.id,
|
|
@@ -109,8 +343,8 @@ function NavItemRow({
|
|
|
109
343
|
] });
|
|
110
344
|
}
|
|
111
345
|
function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
112
|
-
return /* @__PURE__ */
|
|
113
|
-
|
|
346
|
+
return /* @__PURE__ */ jsxs2(
|
|
347
|
+
Box2,
|
|
114
348
|
{
|
|
115
349
|
style: {
|
|
116
350
|
width: "256px",
|
|
@@ -122,16 +356,16 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
122
356
|
flexDirection: "column"
|
|
123
357
|
},
|
|
124
358
|
children: [
|
|
125
|
-
/* @__PURE__ */
|
|
126
|
-
|
|
359
|
+
/* @__PURE__ */ jsx2(
|
|
360
|
+
Box2,
|
|
127
361
|
{
|
|
128
362
|
px: "4",
|
|
129
363
|
py: "3",
|
|
130
364
|
style: { borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 },
|
|
131
|
-
children: /* @__PURE__ */
|
|
132
|
-
meta.logoUrl && /* @__PURE__ */
|
|
133
|
-
/* @__PURE__ */
|
|
134
|
-
|
|
365
|
+
children: /* @__PURE__ */ jsxs2(Flex2, { align: "center", gap: "2", children: [
|
|
366
|
+
meta.logoUrl && /* @__PURE__ */ jsx2("img", { src: meta.logoUrl, alt: meta.title, style: { height: "20px", width: "auto" } }),
|
|
367
|
+
/* @__PURE__ */ jsx2(
|
|
368
|
+
Heading2,
|
|
135
369
|
{
|
|
136
370
|
as: "h2",
|
|
137
371
|
size: "3",
|
|
@@ -139,13 +373,13 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
139
373
|
children: meta.title
|
|
140
374
|
}
|
|
141
375
|
),
|
|
142
|
-
meta.version && /* @__PURE__ */
|
|
376
|
+
meta.version && /* @__PURE__ */ jsx2(Badge, { size: "1", variant: "soft", color: "violet", children: meta.version })
|
|
143
377
|
] })
|
|
144
378
|
}
|
|
145
379
|
),
|
|
146
|
-
/* @__PURE__ */
|
|
147
|
-
/* @__PURE__ */
|
|
148
|
-
|
|
380
|
+
/* @__PURE__ */ jsx2(ScrollArea, { scrollbars: "vertical", style: { flex: 1 }, children: /* @__PURE__ */ jsx2(Box2, { p: "4", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs2(Box2, { mb: "4", children: [
|
|
381
|
+
/* @__PURE__ */ jsx2(
|
|
382
|
+
Text2,
|
|
149
383
|
{
|
|
150
384
|
as: "p",
|
|
151
385
|
size: "1",
|
|
@@ -161,8 +395,8 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
161
395
|
children: section.label
|
|
162
396
|
}
|
|
163
397
|
),
|
|
164
|
-
/* @__PURE__ */
|
|
165
|
-
section.items.map((item) => /* @__PURE__ */
|
|
398
|
+
/* @__PURE__ */ jsx2(Separator2, { size: "4", mb: "2" }),
|
|
399
|
+
section.items.map((item) => /* @__PURE__ */ jsx2(
|
|
166
400
|
NavItemRow,
|
|
167
401
|
{
|
|
168
402
|
item,
|
|
@@ -178,14 +412,14 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
178
412
|
}
|
|
179
413
|
|
|
180
414
|
// 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
|
-
|
|
415
|
+
import ReactMarkdown2 from "react-markdown";
|
|
416
|
+
import remarkGfm2 from "remark-gfm";
|
|
417
|
+
import rehypeHighlight2 from "rehype-highlight";
|
|
418
|
+
import { Box as Box3, Flex as Flex3, Heading as Heading3, Separator as Separator3, Text as Text3 } from "@radix-ui/themes";
|
|
419
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
420
|
+
var markdownComponents2 = {
|
|
421
|
+
h1: ({ children }) => /* @__PURE__ */ jsx3(
|
|
422
|
+
Heading3,
|
|
189
423
|
{
|
|
190
424
|
as: "h1",
|
|
191
425
|
size: "7",
|
|
@@ -194,8 +428,8 @@ var markdownComponents = {
|
|
|
194
428
|
children
|
|
195
429
|
}
|
|
196
430
|
),
|
|
197
|
-
h2: ({ children }) => /* @__PURE__ */
|
|
198
|
-
|
|
431
|
+
h2: ({ children }) => /* @__PURE__ */ jsx3(
|
|
432
|
+
Heading3,
|
|
199
433
|
{
|
|
200
434
|
as: "h2",
|
|
201
435
|
size: "5",
|
|
@@ -205,8 +439,8 @@ var markdownComponents = {
|
|
|
205
439
|
children
|
|
206
440
|
}
|
|
207
441
|
),
|
|
208
|
-
h3: ({ children }) => /* @__PURE__ */
|
|
209
|
-
|
|
442
|
+
h3: ({ children }) => /* @__PURE__ */ jsx3(
|
|
443
|
+
Heading3,
|
|
210
444
|
{
|
|
211
445
|
as: "h3",
|
|
212
446
|
size: "4",
|
|
@@ -216,8 +450,8 @@ var markdownComponents = {
|
|
|
216
450
|
children
|
|
217
451
|
}
|
|
218
452
|
),
|
|
219
|
-
p: ({ children }) => /* @__PURE__ */
|
|
220
|
-
|
|
453
|
+
p: ({ children }) => /* @__PURE__ */ jsx3(
|
|
454
|
+
Text3,
|
|
221
455
|
{
|
|
222
456
|
as: "p",
|
|
223
457
|
size: "3",
|
|
@@ -231,7 +465,7 @@ var markdownComponents = {
|
|
|
231
465
|
children
|
|
232
466
|
}
|
|
233
467
|
),
|
|
234
|
-
a: ({ href, children }) => /* @__PURE__ */
|
|
468
|
+
a: ({ href, children }) => /* @__PURE__ */ jsx3(
|
|
235
469
|
"a",
|
|
236
470
|
{
|
|
237
471
|
href: href ?? "#",
|
|
@@ -242,8 +476,8 @@ var markdownComponents = {
|
|
|
242
476
|
code: ({ className, children }) => {
|
|
243
477
|
const isBlock = className?.startsWith("language-");
|
|
244
478
|
if (isBlock) {
|
|
245
|
-
return /* @__PURE__ */
|
|
246
|
-
|
|
479
|
+
return /* @__PURE__ */ jsx3(
|
|
480
|
+
Box3,
|
|
247
481
|
{
|
|
248
482
|
mb: "4",
|
|
249
483
|
style: {
|
|
@@ -252,7 +486,7 @@ var markdownComponents = {
|
|
|
252
486
|
backgroundColor: "var(--bg-raised)",
|
|
253
487
|
overflowX: "auto"
|
|
254
488
|
},
|
|
255
|
-
children: /* @__PURE__ */
|
|
489
|
+
children: /* @__PURE__ */ jsx3(
|
|
256
490
|
"code",
|
|
257
491
|
{
|
|
258
492
|
className: className ?? "",
|
|
@@ -269,7 +503,7 @@ var markdownComponents = {
|
|
|
269
503
|
}
|
|
270
504
|
);
|
|
271
505
|
}
|
|
272
|
-
return /* @__PURE__ */
|
|
506
|
+
return /* @__PURE__ */ jsx3(
|
|
273
507
|
"code",
|
|
274
508
|
{
|
|
275
509
|
style: {
|
|
@@ -284,7 +518,7 @@ var markdownComponents = {
|
|
|
284
518
|
}
|
|
285
519
|
);
|
|
286
520
|
},
|
|
287
|
-
ul: ({ children }) => /* @__PURE__ */
|
|
521
|
+
ul: ({ children }) => /* @__PURE__ */ jsx3(
|
|
288
522
|
"ul",
|
|
289
523
|
{
|
|
290
524
|
style: {
|
|
@@ -297,7 +531,7 @@ var markdownComponents = {
|
|
|
297
531
|
children
|
|
298
532
|
}
|
|
299
533
|
),
|
|
300
|
-
ol: ({ children }) => /* @__PURE__ */
|
|
534
|
+
ol: ({ children }) => /* @__PURE__ */ jsx3(
|
|
301
535
|
"ol",
|
|
302
536
|
{
|
|
303
537
|
style: {
|
|
@@ -310,8 +544,8 @@ var markdownComponents = {
|
|
|
310
544
|
children
|
|
311
545
|
}
|
|
312
546
|
),
|
|
313
|
-
li: ({ children }) => /* @__PURE__ */
|
|
314
|
-
|
|
547
|
+
li: ({ children }) => /* @__PURE__ */ jsx3(
|
|
548
|
+
Text3,
|
|
315
549
|
{
|
|
316
550
|
as: "p",
|
|
317
551
|
size: "3",
|
|
@@ -324,8 +558,8 @@ var markdownComponents = {
|
|
|
324
558
|
children
|
|
325
559
|
}
|
|
326
560
|
),
|
|
327
|
-
blockquote: ({ children }) => /* @__PURE__ */
|
|
328
|
-
|
|
561
|
+
blockquote: ({ children }) => /* @__PURE__ */ jsx3(
|
|
562
|
+
Box3,
|
|
329
563
|
{
|
|
330
564
|
mb: "4",
|
|
331
565
|
pl: "4",
|
|
@@ -338,7 +572,7 @@ var markdownComponents = {
|
|
|
338
572
|
children
|
|
339
573
|
}
|
|
340
574
|
),
|
|
341
|
-
table: ({ children }) => /* @__PURE__ */
|
|
575
|
+
table: ({ children }) => /* @__PURE__ */ jsx3(Box3, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx3(
|
|
342
576
|
"table",
|
|
343
577
|
{
|
|
344
578
|
style: {
|
|
@@ -350,7 +584,7 @@ var markdownComponents = {
|
|
|
350
584
|
children
|
|
351
585
|
}
|
|
352
586
|
) }),
|
|
353
|
-
th: ({ children }) => /* @__PURE__ */
|
|
587
|
+
th: ({ children }) => /* @__PURE__ */ jsx3(
|
|
354
588
|
"th",
|
|
355
589
|
{
|
|
356
590
|
style: {
|
|
@@ -363,7 +597,7 @@ var markdownComponents = {
|
|
|
363
597
|
children
|
|
364
598
|
}
|
|
365
599
|
),
|
|
366
|
-
td: ({ children }) => /* @__PURE__ */
|
|
600
|
+
td: ({ children }) => /* @__PURE__ */ jsx3(
|
|
367
601
|
"td",
|
|
368
602
|
{
|
|
369
603
|
style: {
|
|
@@ -374,22 +608,22 @@ var markdownComponents = {
|
|
|
374
608
|
children
|
|
375
609
|
}
|
|
376
610
|
),
|
|
377
|
-
hr: () => /* @__PURE__ */
|
|
611
|
+
hr: () => /* @__PURE__ */ jsx3(Flex3, { my: "6", children: /* @__PURE__ */ jsx3(Separator3, { size: "4" }) })
|
|
378
612
|
};
|
|
379
613
|
function MarkdownContent({ content }) {
|
|
380
|
-
return /* @__PURE__ */
|
|
381
|
-
|
|
614
|
+
return /* @__PURE__ */ jsx3(
|
|
615
|
+
ReactMarkdown2,
|
|
382
616
|
{
|
|
383
|
-
remarkPlugins: [
|
|
384
|
-
rehypePlugins: [
|
|
385
|
-
components:
|
|
617
|
+
remarkPlugins: [remarkGfm2],
|
|
618
|
+
rehypePlugins: [rehypeHighlight2],
|
|
619
|
+
components: markdownComponents2,
|
|
386
620
|
children: content
|
|
387
621
|
}
|
|
388
622
|
);
|
|
389
623
|
}
|
|
390
624
|
|
|
391
625
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
392
|
-
import { Fragment, jsx as
|
|
626
|
+
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
393
627
|
var PAGE_TYPE_COLORS = {
|
|
394
628
|
prd: "violet",
|
|
395
629
|
adr: "blue",
|
|
@@ -397,13 +631,13 @@ var PAGE_TYPE_COLORS = {
|
|
|
397
631
|
reference: "gray"
|
|
398
632
|
};
|
|
399
633
|
function PageTypeBadge({ type }) {
|
|
400
|
-
return /* @__PURE__ */
|
|
634
|
+
return /* @__PURE__ */ jsx4(Badge2, { size: "1", variant: "soft", color: PAGE_TYPE_COLORS[type], children: type.toUpperCase() });
|
|
401
635
|
}
|
|
402
636
|
function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
403
637
|
const { meta, navigation, pages } = data;
|
|
404
638
|
const page = pages[activeSlug];
|
|
405
|
-
return /* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
639
|
+
return /* @__PURE__ */ jsx4(Flex4, { direction: "column", style: { height: "100vh", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsxs3(Flex4, { direction: "row", style: { flex: 1, overflow: "hidden" }, children: [
|
|
640
|
+
/* @__PURE__ */ jsx4(
|
|
407
641
|
NavSidebar,
|
|
408
642
|
{
|
|
409
643
|
meta,
|
|
@@ -412,11 +646,11 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
412
646
|
onSlugChange
|
|
413
647
|
}
|
|
414
648
|
),
|
|
415
|
-
/* @__PURE__ */
|
|
416
|
-
/* @__PURE__ */
|
|
417
|
-
page.type && /* @__PURE__ */
|
|
418
|
-
page.lastUpdated && /* @__PURE__ */
|
|
419
|
-
|
|
649
|
+
/* @__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__ */ jsxs3(Fragment2, { children: [
|
|
650
|
+
/* @__PURE__ */ jsxs3(Flex4, { align: "center", gap: "3", mb: "3", children: [
|
|
651
|
+
page.type && /* @__PURE__ */ jsx4(PageTypeBadge, { type: page.type }),
|
|
652
|
+
page.lastUpdated && /* @__PURE__ */ jsxs3(
|
|
653
|
+
Text4,
|
|
420
654
|
{
|
|
421
655
|
size: "1",
|
|
422
656
|
style: { color: "var(--text-muted)", fontFamily: "var(--brand-font-body)" },
|
|
@@ -427,8 +661,8 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
427
661
|
}
|
|
428
662
|
)
|
|
429
663
|
] }),
|
|
430
|
-
/* @__PURE__ */
|
|
431
|
-
|
|
664
|
+
/* @__PURE__ */ jsx4(
|
|
665
|
+
Heading4,
|
|
432
666
|
{
|
|
433
667
|
as: "h1",
|
|
434
668
|
size: "8",
|
|
@@ -440,51 +674,51 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
440
674
|
children: page.title
|
|
441
675
|
}
|
|
442
676
|
),
|
|
443
|
-
/* @__PURE__ */
|
|
444
|
-
/* @__PURE__ */
|
|
677
|
+
/* @__PURE__ */ jsx4(Separator4, { size: "4", mb: "6" }),
|
|
678
|
+
/* @__PURE__ */ jsx4(MarkdownContent, { content: page.content })
|
|
445
679
|
] }) }) }) })
|
|
446
680
|
] }) });
|
|
447
681
|
}
|
|
448
682
|
|
|
449
683
|
// src/components/Logo/Logo.tsx
|
|
450
|
-
import { jsx as
|
|
684
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
451
685
|
function AgMark({ size = 64, variant = "dark" }) {
|
|
452
686
|
const aPrimary = variant === "light" ? "#4A3FCC" : variant === "glow" ? "#9B8FFB" : "#7C6EFA";
|
|
453
687
|
const gPrimary = variant === "light" ? "#0A0A0B" : "#F0EEF8";
|
|
454
688
|
const bgFill = variant === "light" ? "#F0EEF8" : variant === "glow" ? "url(#agGlowGrad)" : "#111113";
|
|
455
|
-
return /* @__PURE__ */
|
|
456
|
-
variant === "glow" && /* @__PURE__ */
|
|
457
|
-
/* @__PURE__ */
|
|
458
|
-
/* @__PURE__ */
|
|
689
|
+
return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 64 64", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
690
|
+
variant === "glow" && /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs4("radialGradient", { id: "agGlowGrad", cx: "30%", cy: "30%", r: "80%", children: [
|
|
691
|
+
/* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#1A1630" }),
|
|
692
|
+
/* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#0D0C1A" })
|
|
459
693
|
] }) }),
|
|
460
|
-
/* @__PURE__ */
|
|
461
|
-
/* @__PURE__ */
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
-
/* @__PURE__ */
|
|
464
|
-
/* @__PURE__ */
|
|
694
|
+
/* @__PURE__ */ jsx5("rect", { width: "64", height: "64", rx: "14", fill: bgFill }),
|
|
695
|
+
/* @__PURE__ */ jsx5("path", { d: "M14 46 L24 20 L34 46", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
696
|
+
/* @__PURE__ */ jsx5("line", { x1: "18", y1: "37", x2: "30", y2: "37", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round" }),
|
|
697
|
+
/* @__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" }),
|
|
698
|
+
/* @__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
699
|
] });
|
|
466
700
|
}
|
|
467
701
|
function AgWordmark() {
|
|
468
|
-
return /* @__PURE__ */
|
|
469
|
-
/* @__PURE__ */
|
|
470
|
-
/* @__PURE__ */
|
|
471
|
-
/* @__PURE__ */
|
|
472
|
-
/* @__PURE__ */
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
/* @__PURE__ */
|
|
702
|
+
return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
703
|
+
/* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
|
|
704
|
+
/* @__PURE__ */ jsx5("rect", { width: "36", height: "36", rx: "8", fill: "#18181C" }),
|
|
705
|
+
/* @__PURE__ */ jsx5("path", { d: "M6 26 L13 10 L20 26", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
706
|
+
/* @__PURE__ */ jsx5("line", { x1: "9", y1: "20.5", x2: "17", y2: "20.5", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
707
|
+
/* @__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" }),
|
|
708
|
+
/* @__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
709
|
] }),
|
|
476
|
-
/* @__PURE__ */
|
|
710
|
+
/* @__PURE__ */ jsxs4("span", { style: { fontFamily: "var(--brand-font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-primary)", letterSpacing: "-0.02em" }, children: [
|
|
477
711
|
"Adarsh",
|
|
478
|
-
/* @__PURE__ */
|
|
712
|
+
/* @__PURE__ */ jsx5("span", { style: { color: "var(--accent)" }, children: "." })
|
|
479
713
|
] })
|
|
480
714
|
] });
|
|
481
715
|
}
|
|
482
716
|
|
|
483
717
|
// src/components/Footer/Footer.tsx
|
|
484
|
-
import { jsx as
|
|
718
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
485
719
|
function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
486
720
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
487
|
-
return /* @__PURE__ */
|
|
721
|
+
return /* @__PURE__ */ jsxs5("div", { style: {
|
|
488
722
|
paddingTop: "var(--sp-16)",
|
|
489
723
|
paddingBottom: "var(--sp-8)",
|
|
490
724
|
borderTop: "1px solid var(--border-subtle)",
|
|
@@ -494,13 +728,13 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
|
494
728
|
flexWrap: "wrap",
|
|
495
729
|
gap: "var(--sp-4)"
|
|
496
730
|
}, children: [
|
|
497
|
-
/* @__PURE__ */
|
|
498
|
-
/* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */
|
|
500
|
-
/* @__PURE__ */
|
|
501
|
-
/* @__PURE__ */
|
|
731
|
+
/* @__PURE__ */ jsx6(AgWordmark, {}),
|
|
732
|
+
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
733
|
+
/* @__PURE__ */ jsxs5("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
|
|
734
|
+
/* @__PURE__ */ jsx6("circle", { cx: "6", cy: "6", r: "5.5", stroke: "var(--border-soft)" }),
|
|
735
|
+
/* @__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
736
|
] }),
|
|
503
|
-
/* @__PURE__ */
|
|
737
|
+
/* @__PURE__ */ jsxs5("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
|
|
504
738
|
year,
|
|
505
739
|
" Adarsh Goswami. All rights reserved."
|
|
506
740
|
] })
|
|
@@ -524,7 +758,7 @@ function useTheme() {
|
|
|
524
758
|
}
|
|
525
759
|
|
|
526
760
|
// src/components/Theme/ThemeProvider.tsx
|
|
527
|
-
import { jsx as
|
|
761
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
528
762
|
function ThemeProvider({
|
|
529
763
|
children,
|
|
530
764
|
defaultTheme = "dark"
|
|
@@ -540,15 +774,15 @@ function ThemeProvider({
|
|
|
540
774
|
const toggleTheme = useCallback(() => {
|
|
541
775
|
setThemeState((prev) => prev === "dark" ? "light" : "dark");
|
|
542
776
|
}, []);
|
|
543
|
-
return /* @__PURE__ */
|
|
777
|
+
return /* @__PURE__ */ jsx7(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: /* @__PURE__ */ jsx7(Theme, { appearance: theme, children }) });
|
|
544
778
|
}
|
|
545
779
|
|
|
546
780
|
// src/components/Theme/ThemeToggle.tsx
|
|
547
781
|
import { Switch } from "@radix-ui/themes";
|
|
548
|
-
import { jsx as
|
|
782
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
549
783
|
function ThemeToggle({ "aria-label": ariaLabel = "Toggle theme" }) {
|
|
550
784
|
const { theme, toggleTheme } = useTheme();
|
|
551
|
-
return /* @__PURE__ */
|
|
785
|
+
return /* @__PURE__ */ jsx8(
|
|
552
786
|
Switch,
|
|
553
787
|
{
|
|
554
788
|
size: "2",
|
|
@@ -622,7 +856,7 @@ var package_default = {
|
|
|
622
856
|
};
|
|
623
857
|
|
|
624
858
|
// src/components/ThemePage/ThemePage.tsx
|
|
625
|
-
import { jsx as
|
|
859
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
626
860
|
function useTokenMap(tokens) {
|
|
627
861
|
const [map, setMap] = useState2({});
|
|
628
862
|
useEffect2(() => {
|
|
@@ -634,7 +868,7 @@ function useTokenMap(tokens) {
|
|
|
634
868
|
return map;
|
|
635
869
|
}
|
|
636
870
|
function SectionLabel({ children }) {
|
|
637
|
-
return /* @__PURE__ */
|
|
871
|
+
return /* @__PURE__ */ jsx9("p", { style: {
|
|
638
872
|
fontFamily: "var(--brand-font-mono)",
|
|
639
873
|
fontSize: "var(--brand-text-xs)",
|
|
640
874
|
letterSpacing: "0.1em",
|
|
@@ -644,29 +878,29 @@ function SectionLabel({ children }) {
|
|
|
644
878
|
}, children });
|
|
645
879
|
}
|
|
646
880
|
function Section({ label, title, description, children, first }) {
|
|
647
|
-
return /* @__PURE__ */
|
|
881
|
+
return /* @__PURE__ */ jsxs6("section", { style: {
|
|
648
882
|
marginBottom: "var(--sp-24)",
|
|
649
883
|
paddingTop: first ? 0 : "var(--sp-24)",
|
|
650
884
|
borderTop: first ? "none" : "1px solid var(--border-subtle)"
|
|
651
885
|
}, children: [
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
description && /* @__PURE__ */
|
|
886
|
+
/* @__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 }),
|
|
887
|
+
/* @__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 }),
|
|
888
|
+
description && /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", marginBottom: "var(--sp-8)", maxWidth: 480 }, children: description }),
|
|
655
889
|
children
|
|
656
890
|
] });
|
|
657
891
|
}
|
|
658
892
|
function ColorSwatch({ token, label, values }) {
|
|
659
|
-
return /* @__PURE__ */
|
|
660
|
-
/* @__PURE__ */
|
|
661
|
-
/* @__PURE__ */
|
|
662
|
-
/* @__PURE__ */
|
|
663
|
-
/* @__PURE__ */
|
|
664
|
-
values[token] && /* @__PURE__ */
|
|
893
|
+
return /* @__PURE__ */ jsxs6("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
|
|
894
|
+
/* @__PURE__ */ jsx9("div", { style: { height: 56, background: `var(${token})` } }),
|
|
895
|
+
/* @__PURE__ */ jsxs6("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
|
|
896
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", fontWeight: 500, color: "var(--text-primary)", marginBottom: 2 }, children: label }),
|
|
897
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-muted)" }, children: token }),
|
|
898
|
+
values[token] && /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: values[token] })
|
|
665
899
|
] })
|
|
666
900
|
] });
|
|
667
901
|
}
|
|
668
902
|
function ColorGrid({ children }) {
|
|
669
|
-
return /* @__PURE__ */
|
|
903
|
+
return /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "var(--sp-3)" }, children });
|
|
670
904
|
}
|
|
671
905
|
var COLOR_TOKENS = [
|
|
672
906
|
"--bg-base",
|
|
@@ -763,128 +997,128 @@ function fontFamilyVar(family) {
|
|
|
763
997
|
function ComponentsSection() {
|
|
764
998
|
const [tooltipVisible, setTooltipVisible] = useState2(false);
|
|
765
999
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
766
|
-
return /* @__PURE__ */
|
|
767
|
-
/* @__PURE__ */
|
|
768
|
-
/* @__PURE__ */
|
|
769
|
-
/* @__PURE__ */
|
|
770
|
-
/* @__PURE__ */
|
|
771
|
-
/* @__PURE__ */
|
|
772
|
-
/* @__PURE__ */
|
|
773
|
-
/* @__PURE__ */
|
|
1000
|
+
return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
|
|
1001
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1002
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Buttons" }),
|
|
1003
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
|
|
1004
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("primary"), children: "Deploy service" }),
|
|
1005
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("secondary"), children: "View source" }),
|
|
1006
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("ghost"), children: "Cancel" }),
|
|
1007
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("danger"), children: "Delete" })
|
|
774
1008
|
] }),
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
/* @__PURE__ */
|
|
777
|
-
/* @__PURE__ */
|
|
778
|
-
/* @__PURE__ */
|
|
1009
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
1010
|
+
/* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Small" }),
|
|
1011
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("primary"), children: "Default" }),
|
|
1012
|
+
/* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("lg") }, children: "Large" })
|
|
779
1013
|
] })
|
|
780
1014
|
] }),
|
|
781
|
-
/* @__PURE__ */
|
|
782
|
-
/* @__PURE__ */
|
|
783
|
-
/* @__PURE__ */
|
|
1015
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1016
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Badges" }),
|
|
1017
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
784
1018
|
{ label: "Default", bg: "var(--bg-overlay)", color: "var(--text-secondary)", border: "var(--border-soft)" },
|
|
785
1019
|
{ label: "\u25CF Live", bg: "var(--accent-subtle)", color: "var(--accent-bright)", border: "var(--accent-border)" },
|
|
786
1020
|
{ label: "\u25CF Active", bg: "var(--success-bg)", color: "var(--success)", border: "var(--success-border)" },
|
|
787
1021
|
{ label: "\u25CF Degraded", bg: "var(--warning-bg)", color: "var(--warning)", border: "var(--warning-border)" },
|
|
788
1022
|
{ label: "\u25CF Offline", bg: "var(--error-bg)", color: "var(--error)", border: "var(--error-border)" }
|
|
789
|
-
].map((b) => /* @__PURE__ */
|
|
1023
|
+
].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
1024
|
] }),
|
|
791
|
-
/* @__PURE__ */
|
|
792
|
-
/* @__PURE__ */
|
|
793
|
-
/* @__PURE__ */
|
|
1025
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1026
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Cards" }),
|
|
1027
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
794
1028
|
{ icon: "\u{1F510}", title: "Auth Service", body: "JWT-based auth with refresh tokens, OAuth2, and session management." },
|
|
795
1029
|
{ icon: "\u{1F4B3}", title: "Payments", body: "Stripe-powered billing with webhooks, subscriptions, and invoicing." },
|
|
796
1030
|
{ icon: "\u{1F4E8}", title: "Notifications", body: "Email, push, and in-app notification service with templates." }
|
|
797
|
-
].map((card) => /* @__PURE__ */
|
|
798
|
-
/* @__PURE__ */
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
1031
|
+
].map((card) => /* @__PURE__ */ jsxs6("div", { style: { background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-6)" }, children: [
|
|
1032
|
+
/* @__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 }),
|
|
1033
|
+
/* @__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 }),
|
|
1034
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.6 }, children: card.body })
|
|
801
1035
|
] }, card.title)) })
|
|
802
1036
|
] }),
|
|
803
|
-
/* @__PURE__ */
|
|
804
|
-
/* @__PURE__ */
|
|
805
|
-
/* @__PURE__ */
|
|
806
|
-
/* @__PURE__ */
|
|
807
|
-
/* @__PURE__ */
|
|
808
|
-
/* @__PURE__ */
|
|
1037
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1038
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Form Inputs" }),
|
|
1039
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
|
|
1040
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1041
|
+
/* @__PURE__ */ jsx9("label", { style: labelStyle, children: "Project name" }),
|
|
1042
|
+
/* @__PURE__ */ jsx9("input", { readOnly: true, style: inputStyle(), placeholder: "my-awesome-app", defaultValue: "" })
|
|
809
1043
|
] }),
|
|
810
|
-
/* @__PURE__ */
|
|
811
|
-
/* @__PURE__ */
|
|
812
|
-
/* @__PURE__ */
|
|
813
|
-
/* @__PURE__ */
|
|
1044
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1045
|
+
/* @__PURE__ */ jsx9("label", { style: labelStyle, children: "API Key" }),
|
|
1046
|
+
/* @__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" }),
|
|
1047
|
+
/* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: "var(--text-muted)" }, children: "Keep this secret. Rotate from the dashboard." })
|
|
814
1048
|
] }),
|
|
815
|
-
/* @__PURE__ */
|
|
816
|
-
/* @__PURE__ */
|
|
817
|
-
/* @__PURE__ */
|
|
818
|
-
/* @__PURE__ */
|
|
1049
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1050
|
+
/* @__PURE__ */ jsx9("label", { style: labelStyle, children: "Status" }),
|
|
1051
|
+
/* @__PURE__ */ jsx9("input", { readOnly: true, style: inputStyle("error"), defaultValue: "invalid-slug!" }),
|
|
1052
|
+
/* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: "var(--error)" }, children: "Only lowercase letters, numbers, and hyphens." })
|
|
819
1053
|
] })
|
|
820
1054
|
] })
|
|
821
1055
|
] }),
|
|
822
|
-
/* @__PURE__ */
|
|
823
|
-
/* @__PURE__ */
|
|
824
|
-
/* @__PURE__ */
|
|
825
|
-
/* @__PURE__ */
|
|
1056
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1057
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Code Block" }),
|
|
1058
|
+
/* @__PURE__ */ jsxs6("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: [
|
|
1059
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--text-disabled)" }, children: "// Initialize AG Auth" }),
|
|
826
1060
|
"\n",
|
|
827
|
-
/* @__PURE__ */
|
|
1061
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "import" }),
|
|
828
1062
|
" { createClient } ",
|
|
829
|
-
/* @__PURE__ */
|
|
1063
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "from" }),
|
|
830
1064
|
" ",
|
|
831
|
-
/* @__PURE__ */
|
|
1065
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--success)" }, children: "'@ag/auth'" }),
|
|
832
1066
|
"\n\n",
|
|
833
|
-
/* @__PURE__ */
|
|
1067
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "const" }),
|
|
834
1068
|
" auth = ",
|
|
835
|
-
/* @__PURE__ */
|
|
1069
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--info)" }, children: "createClient" }),
|
|
836
1070
|
"({\n",
|
|
837
1071
|
" projectId: ",
|
|
838
|
-
/* @__PURE__ */
|
|
1072
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--success)" }, children: "'proj_xxxxxxxx'" }),
|
|
839
1073
|
",\n",
|
|
840
1074
|
" secret: process.env.",
|
|
841
|
-
/* @__PURE__ */
|
|
1075
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--info)" }, children: "AG_SECRET" }),
|
|
842
1076
|
",\n",
|
|
843
1077
|
" ttl: ",
|
|
844
|
-
/* @__PURE__ */
|
|
1078
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--warning)" }, children: "3600" }),
|
|
845
1079
|
",\n",
|
|
846
1080
|
"})\n\n",
|
|
847
|
-
/* @__PURE__ */
|
|
1081
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "export default" }),
|
|
848
1082
|
" auth"
|
|
849
1083
|
] })
|
|
850
1084
|
] }),
|
|
851
|
-
/* @__PURE__ */
|
|
852
|
-
/* @__PURE__ */
|
|
853
|
-
/* @__PURE__ */
|
|
854
|
-
/* @__PURE__ */
|
|
855
|
-
/* @__PURE__ */
|
|
856
|
-
/* @__PURE__ */
|
|
857
|
-
/* @__PURE__ */
|
|
858
|
-
/* @__PURE__ */
|
|
859
|
-
/* @__PURE__ */
|
|
1085
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1086
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Navigation" }),
|
|
1087
|
+
/* @__PURE__ */ jsxs6("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: [
|
|
1088
|
+
/* @__PURE__ */ jsxs6("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: [
|
|
1089
|
+
/* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
|
|
1090
|
+
/* @__PURE__ */ jsx9("path", { d: "M4 18 L9 6 L14 18", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
1091
|
+
/* @__PURE__ */ jsx9("line", { x1: "6", y1: "14", x2: "12", y2: "14", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
1092
|
+
/* @__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" }),
|
|
1093
|
+
/* @__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
1094
|
] }),
|
|
861
1095
|
"Adarsh"
|
|
862
1096
|
] }),
|
|
863
|
-
/* @__PURE__ */
|
|
864
|
-
/* @__PURE__ */
|
|
865
|
-
/* @__PURE__ */
|
|
866
|
-
/* @__PURE__ */
|
|
1097
|
+
/* @__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)) }),
|
|
1098
|
+
/* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
1099
|
+
/* @__PURE__ */ jsx9(ThemeToggle, {}),
|
|
1100
|
+
/* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Hire me" })
|
|
867
1101
|
] })
|
|
868
1102
|
] })
|
|
869
1103
|
] }),
|
|
870
|
-
/* @__PURE__ */
|
|
871
|
-
/* @__PURE__ */
|
|
872
|
-
/* @__PURE__ */
|
|
1104
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1105
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Tooltip" }),
|
|
1106
|
+
/* @__PURE__ */ jsxs6(
|
|
873
1107
|
"div",
|
|
874
1108
|
{
|
|
875
1109
|
style: { position: "relative", display: "inline-block" },
|
|
876
1110
|
onMouseEnter: () => setTooltipVisible(true),
|
|
877
1111
|
onMouseLeave: () => setTooltipVisible(false),
|
|
878
1112
|
children: [
|
|
879
|
-
/* @__PURE__ */
|
|
880
|
-
tooltipVisible && /* @__PURE__ */
|
|
1113
|
+
/* @__PURE__ */ jsx9("button", { style: btnStyle("secondary"), children: "Hover me" }),
|
|
1114
|
+
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
1115
|
]
|
|
882
1116
|
}
|
|
883
1117
|
)
|
|
884
1118
|
] }),
|
|
885
|
-
/* @__PURE__ */
|
|
886
|
-
/* @__PURE__ */
|
|
887
|
-
/* @__PURE__ */
|
|
1119
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1120
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Tags" }),
|
|
1121
|
+
/* @__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
1122
|
] })
|
|
889
1123
|
] });
|
|
890
1124
|
}
|
|
@@ -936,7 +1170,7 @@ function ThemePage({ version = package_default.version }) {
|
|
|
936
1170
|
const colorValues = useTokenMap(COLOR_TOKENS);
|
|
937
1171
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
938
1172
|
const dot = { width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block" };
|
|
939
|
-
return /* @__PURE__ */
|
|
1173
|
+
return /* @__PURE__ */ jsx9("div", { style: {
|
|
940
1174
|
background: "var(--bg-base)",
|
|
941
1175
|
color: "var(--text-primary)",
|
|
942
1176
|
fontFamily: "var(--brand-font-body)",
|
|
@@ -944,9 +1178,9 @@ function ThemePage({ version = package_default.version }) {
|
|
|
944
1178
|
lineHeight: 1.6,
|
|
945
1179
|
WebkitFontSmoothing: "antialiased",
|
|
946
1180
|
minHeight: "100vh"
|
|
947
|
-
}, children: /* @__PURE__ */
|
|
948
|
-
/* @__PURE__ */
|
|
949
|
-
/* @__PURE__ */
|
|
1181
|
+
}, children: /* @__PURE__ */ jsxs6("div", { style: { maxWidth: "var(--brand-layout-container-max)", margin: "0 auto", padding: "var(--sp-16) var(--sp-8)" }, children: [
|
|
1182
|
+
/* @__PURE__ */ jsxs6("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
|
|
1183
|
+
/* @__PURE__ */ jsx9("div", { style: {
|
|
950
1184
|
position: "absolute",
|
|
951
1185
|
top: -80,
|
|
952
1186
|
left: -120,
|
|
@@ -955,131 +1189,131 @@ function ThemePage({ version = package_default.version }) {
|
|
|
955
1189
|
background: "radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%)",
|
|
956
1190
|
pointerEvents: "none"
|
|
957
1191
|
} }),
|
|
958
|
-
/* @__PURE__ */
|
|
959
|
-
/* @__PURE__ */
|
|
1192
|
+
/* @__PURE__ */ jsxs6("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: [
|
|
1193
|
+
/* @__PURE__ */ jsx9("span", { style: { width: 24, height: 1, background: "var(--border-mid)", display: "inline-block" } }),
|
|
960
1194
|
"@adarsh_goswami/brand",
|
|
961
|
-
version && /* @__PURE__ */
|
|
1195
|
+
version && /* @__PURE__ */ jsxs6("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
1196
|
"v",
|
|
963
1197
|
version
|
|
964
1198
|
] })
|
|
965
1199
|
] }),
|
|
966
|
-
/* @__PURE__ */
|
|
967
|
-
/* @__PURE__ */
|
|
968
|
-
/* @__PURE__ */
|
|
969
|
-
/* @__PURE__ */
|
|
1200
|
+
/* @__PURE__ */ jsxs6("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: [
|
|
1201
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--text-primary)" }, children: "Design" }),
|
|
1202
|
+
/* @__PURE__ */ jsx9("br", {}),
|
|
1203
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "var(--accent)" }, children: "System" })
|
|
970
1204
|
] }),
|
|
971
|
-
/* @__PURE__ */
|
|
972
|
-
/* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
1205
|
+
/* @__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." }),
|
|
1206
|
+
/* @__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__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
1207
|
+
/* @__PURE__ */ jsx9("span", { style: dot }),
|
|
974
1208
|
tech
|
|
975
1209
|
] }, tech)) })
|
|
976
1210
|
] }),
|
|
977
|
-
/* @__PURE__ */
|
|
978
|
-
/* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
1211
|
+
/* @__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__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
1212
|
+
/* @__PURE__ */ jsxs6("div", { style: logoCardStyle("dark"), children: [
|
|
1213
|
+
/* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "dark" }),
|
|
1214
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Primary \u2014 Dark" })
|
|
981
1215
|
] }),
|
|
982
|
-
/* @__PURE__ */
|
|
983
|
-
/* @__PURE__ */
|
|
984
|
-
/* @__PURE__ */
|
|
1216
|
+
/* @__PURE__ */ jsxs6("div", { style: logoCardStyle("glow"), children: [
|
|
1217
|
+
/* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "glow" }),
|
|
1218
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Glow Variant" })
|
|
985
1219
|
] }),
|
|
986
|
-
/* @__PURE__ */
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
1220
|
+
/* @__PURE__ */ jsxs6("div", { style: logoCardStyle("light"), children: [
|
|
1221
|
+
/* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "light" }),
|
|
1222
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("light"), children: "Light Variant" })
|
|
989
1223
|
] }),
|
|
990
|
-
/* @__PURE__ */
|
|
991
|
-
/* @__PURE__ */
|
|
992
|
-
/* @__PURE__ */
|
|
1224
|
+
/* @__PURE__ */ jsxs6("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
|
|
1225
|
+
/* @__PURE__ */ jsx9(AgWordmark, {}),
|
|
1226
|
+
/* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Wordmark" })
|
|
993
1227
|
] })
|
|
994
1228
|
] }) }),
|
|
995
|
-
/* @__PURE__ */
|
|
996
|
-
/* @__PURE__ */
|
|
997
|
-
/* @__PURE__ */
|
|
998
|
-
/* @__PURE__ */
|
|
999
|
-
/* @__PURE__ */
|
|
1000
|
-
/* @__PURE__ */
|
|
1001
|
-
/* @__PURE__ */
|
|
1229
|
+
/* @__PURE__ */ jsxs6(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: [
|
|
1230
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Accent" }),
|
|
1231
|
+
/* @__PURE__ */ jsxs6(ColorGrid, { children: [
|
|
1232
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-bright", label: "Bright", values: colorValues }),
|
|
1233
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent", label: "Base", values: colorValues }),
|
|
1234
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-dim", label: "Dim", values: colorValues }),
|
|
1235
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-glow", label: "Glow", values: colorValues })
|
|
1002
1236
|
] }),
|
|
1003
|
-
/* @__PURE__ */
|
|
1004
|
-
/* @__PURE__ */
|
|
1005
|
-
/* @__PURE__ */
|
|
1006
|
-
/* @__PURE__ */
|
|
1007
|
-
/* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1237
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Backgrounds" }),
|
|
1238
|
+
/* @__PURE__ */ jsxs6(ColorGrid, { children: [
|
|
1239
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-base", label: "Base", values: colorValues }),
|
|
1240
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-surface", label: "Surface", values: colorValues }),
|
|
1241
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-raised", label: "Raised", values: colorValues }),
|
|
1242
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-overlay", label: "Overlay", values: colorValues })
|
|
1009
1243
|
] }),
|
|
1010
|
-
/* @__PURE__ */
|
|
1011
|
-
/* @__PURE__ */
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1244
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Borders" }),
|
|
1245
|
+
/* @__PURE__ */ jsxs6(ColorGrid, { children: [
|
|
1246
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-subtle", label: "Subtle", values: colorValues }),
|
|
1247
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-soft", label: "Soft", values: colorValues }),
|
|
1248
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-mid", label: "Mid", values: colorValues })
|
|
1015
1249
|
] }),
|
|
1016
|
-
/* @__PURE__ */
|
|
1017
|
-
/* @__PURE__ */
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1021
|
-
/* @__PURE__ */
|
|
1250
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Text" }),
|
|
1251
|
+
/* @__PURE__ */ jsxs6(ColorGrid, { children: [
|
|
1252
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-primary", label: "Primary", values: colorValues }),
|
|
1253
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-secondary", label: "Secondary", values: colorValues }),
|
|
1254
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-muted", label: "Muted", values: colorValues }),
|
|
1255
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-disabled", label: "Disabled", values: colorValues })
|
|
1022
1256
|
] }),
|
|
1023
|
-
/* @__PURE__ */
|
|
1024
|
-
/* @__PURE__ */
|
|
1025
|
-
/* @__PURE__ */
|
|
1026
|
-
/* @__PURE__ */
|
|
1027
|
-
/* @__PURE__ */
|
|
1028
|
-
/* @__PURE__ */
|
|
1257
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Semantic" }),
|
|
1258
|
+
/* @__PURE__ */ jsxs6(ColorGrid, { children: [
|
|
1259
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--success", label: "Success", values: colorValues }),
|
|
1260
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--warning", label: "Warning", values: colorValues }),
|
|
1261
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--error", label: "Error", values: colorValues }),
|
|
1262
|
+
/* @__PURE__ */ jsx9(ColorSwatch, { token: "--info", label: "Info", values: colorValues })
|
|
1029
1263
|
] })
|
|
1030
1264
|
] }),
|
|
1031
|
-
/* @__PURE__ */
|
|
1032
|
-
/* @__PURE__ */
|
|
1033
|
-
/* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1035
|
-
/* @__PURE__ */
|
|
1265
|
+
/* @__PURE__ */ jsxs6(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: [
|
|
1266
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Families" }),
|
|
1267
|
+
/* @__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__ */ jsxs6("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: [
|
|
1268
|
+
/* @__PURE__ */ jsx9("span", { style: { fontFamily: cssFamily, fontWeight: weight, fontSize: "var(--brand-text-lg)", color: "var(--text-primary)" }, children: sample }),
|
|
1269
|
+
/* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }, children: token })
|
|
1036
1270
|
] }, token)) }),
|
|
1037
|
-
/* @__PURE__ */
|
|
1038
|
-
/* @__PURE__ */
|
|
1039
|
-
/* @__PURE__ */
|
|
1040
|
-
/* @__PURE__ */
|
|
1041
|
-
/* @__PURE__ */
|
|
1042
|
-
/* @__PURE__ */
|
|
1271
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Scale" }),
|
|
1272
|
+
/* @__PURE__ */ jsx9("div", { children: TYPE_SCALE.map(({ token, label, role, weight, family }) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--sp-6)", padding: "var(--sp-5) 0", borderBottom: "1px solid var(--border-subtle)" }, children: [
|
|
1273
|
+
/* @__PURE__ */ jsxs6("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
|
|
1274
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }, children: token }),
|
|
1275
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: label }),
|
|
1276
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: role })
|
|
1043
1277
|
] }),
|
|
1044
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: fontFamilyVar(family), fontSize: `var(${token})`, fontWeight: weight, color: "var(--text-primary)", lineHeight: 1.2 }, children: TYPE_SPECIMENS[token] })
|
|
1045
1279
|
] }, token)) })
|
|
1046
1280
|
] }),
|
|
1047
|
-
/* @__PURE__ */
|
|
1048
|
-
/* @__PURE__ */
|
|
1049
|
-
/* @__PURE__ */
|
|
1050
|
-
/* @__PURE__ */
|
|
1051
|
-
/* @__PURE__ */
|
|
1281
|
+
/* @__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__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-4)" }, children: [
|
|
1282
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 70 }, children: token }),
|
|
1283
|
+
/* @__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 } }) }),
|
|
1284
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-secondary)", minWidth: 50 }, children: rem }),
|
|
1285
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 40 }, children: px })
|
|
1052
1286
|
] }, token)) }) }),
|
|
1053
|
-
/* @__PURE__ */
|
|
1054
|
-
/* @__PURE__ */
|
|
1055
|
-
/* @__PURE__ */
|
|
1056
|
-
/* @__PURE__ */
|
|
1057
|
-
/* @__PURE__ */
|
|
1287
|
+
/* @__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__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
1288
|
+
/* @__PURE__ */ jsx9("div", { style: { width: 64, height: 64, background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: `var(${token})` } }),
|
|
1289
|
+
/* @__PURE__ */ jsxs6("div", { style: { textAlign: "center" }, children: [
|
|
1290
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)" }, children: label }),
|
|
1291
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: value })
|
|
1058
1292
|
] })
|
|
1059
1293
|
] }, token)) }) }),
|
|
1060
|
-
/* @__PURE__ */
|
|
1061
|
-
/* @__PURE__ */
|
|
1062
|
-
/* @__PURE__ */
|
|
1063
|
-
/* @__PURE__ */
|
|
1294
|
+
/* @__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__ */ jsxs6("div", { style: { padding: "var(--sp-8)", background: "var(--bg-surface)", borderRadius: "var(--brand-radius-lg)", boxShadow: `var(${token})` }, children: [
|
|
1295
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-1)" }, children: token }),
|
|
1296
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-secondary)", marginBottom: "var(--sp-1)" }, children: label }),
|
|
1297
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-muted)" }, children: desc })
|
|
1064
1298
|
] }, token)) }) }),
|
|
1065
|
-
/* @__PURE__ */
|
|
1066
|
-
/* @__PURE__ */
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
-
/* @__PURE__ */
|
|
1072
|
-
/* @__PURE__ */
|
|
1299
|
+
/* @__PURE__ */ jsx9(Section, { label: "07 \u2014 Components", title: "UI Components", description: "Core interactive elements built from the token system above.", children: /* @__PURE__ */ jsx9(ComponentsSection, {}) }),
|
|
1300
|
+
/* @__PURE__ */ jsxs6(Section, { label: "08 \u2014 Motion", title: "Animation Tokens", description: "Subtle, purposeful motion. Never decorative \u2014 always communicates state or hierarchy.", children: [
|
|
1301
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Easing" }),
|
|
1302
|
+
/* @__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__ */ jsxs6("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
|
|
1303
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1304
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)" }, children: label }),
|
|
1305
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: value }),
|
|
1306
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1073
1307
|
] }, token)) }),
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */
|
|
1076
|
-
/* @__PURE__ */
|
|
1077
|
-
/* @__PURE__ */
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
/* @__PURE__ */
|
|
1308
|
+
/* @__PURE__ */ jsx9(SectionLabel, { children: "Duration" }),
|
|
1309
|
+
/* @__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__ */ jsxs6("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
|
|
1310
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1311
|
+
/* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-xl)", fontWeight: 700, color: "var(--text-primary)" }, children: value }),
|
|
1312
|
+
/* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: label }),
|
|
1313
|
+
/* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1080
1314
|
] }, token)) })
|
|
1081
1315
|
] }),
|
|
1082
|
-
/* @__PURE__ */
|
|
1316
|
+
/* @__PURE__ */ jsx9(Footer, {})
|
|
1083
1317
|
] }) });
|
|
1084
1318
|
}
|
|
1085
1319
|
function logoCardStyle(bg) {
|
|
@@ -1124,6 +1358,7 @@ var favicon_default = 'data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" x
|
|
|
1124
1358
|
export {
|
|
1125
1359
|
AgMark,
|
|
1126
1360
|
AgWordmark,
|
|
1361
|
+
BlogPost,
|
|
1127
1362
|
DocsLayout,
|
|
1128
1363
|
Footer,
|
|
1129
1364
|
ThemePage,
|