@adarsh_goswami/design 0.1.0 → 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.cjs
CHANGED
|
@@ -32,6 +32,7 @@ var index_exports = {};
|
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
AgMark: () => AgMark,
|
|
34
34
|
AgWordmark: () => AgWordmark,
|
|
35
|
+
BlogPost: () => BlogPost,
|
|
35
36
|
DocsLayout: () => DocsLayout,
|
|
36
37
|
Footer: () => Footer,
|
|
37
38
|
ThemePage: () => ThemePage,
|
|
@@ -44,15 +45,249 @@ __export(index_exports, {
|
|
|
44
45
|
});
|
|
45
46
|
module.exports = __toCommonJS(index_exports);
|
|
46
47
|
|
|
48
|
+
// src/components/BlogPost/BlogPost.tsx
|
|
49
|
+
var import_react_markdown = __toESM(require("react-markdown"), 1);
|
|
50
|
+
var import_remark_gfm = __toESM(require("remark-gfm"), 1);
|
|
51
|
+
var import_rehype_highlight = __toESM(require("rehype-highlight"), 1);
|
|
52
|
+
var import_themes = require("@radix-ui/themes");
|
|
53
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
54
|
+
function calcReadingTime(content) {
|
|
55
|
+
const words = content.trim().split(/\s+/).filter(Boolean).length;
|
|
56
|
+
return Math.ceil(words / 200);
|
|
57
|
+
}
|
|
58
|
+
var markdownComponents = {
|
|
59
|
+
h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
|
+
import_themes.Heading,
|
|
61
|
+
{
|
|
62
|
+
as: "h1",
|
|
63
|
+
size: "7",
|
|
64
|
+
mb: "4",
|
|
65
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
66
|
+
children
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
import_themes.Heading,
|
|
71
|
+
{
|
|
72
|
+
as: "h2",
|
|
73
|
+
size: "5",
|
|
74
|
+
mb: "3",
|
|
75
|
+
mt: "6",
|
|
76
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
77
|
+
children
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
import_themes.Heading,
|
|
82
|
+
{
|
|
83
|
+
as: "h3",
|
|
84
|
+
size: "4",
|
|
85
|
+
mb: "2",
|
|
86
|
+
mt: "5",
|
|
87
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-secondary)" },
|
|
88
|
+
children
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
import_themes.Text,
|
|
93
|
+
{
|
|
94
|
+
as: "p",
|
|
95
|
+
size: "3",
|
|
96
|
+
mb: "4",
|
|
97
|
+
style: {
|
|
98
|
+
fontFamily: "var(--brand-font-body)",
|
|
99
|
+
color: "var(--text-secondary)",
|
|
100
|
+
lineHeight: "var(--brand-leading-relaxed)",
|
|
101
|
+
display: "block"
|
|
102
|
+
},
|
|
103
|
+
children
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: href ?? "#", style: { color: "var(--accent)", textDecoration: "underline" }, children }),
|
|
107
|
+
code: ({ className, children }) => {
|
|
108
|
+
const isBlock = className?.startsWith("language-");
|
|
109
|
+
if (isBlock) {
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
|
+
import_themes.Box,
|
|
112
|
+
{
|
|
113
|
+
mb: "4",
|
|
114
|
+
style: {
|
|
115
|
+
borderRadius: "var(--brand-radius-lg)",
|
|
116
|
+
border: "1px solid var(--border-soft)",
|
|
117
|
+
backgroundColor: "var(--bg-raised)",
|
|
118
|
+
overflowX: "auto"
|
|
119
|
+
},
|
|
120
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
121
|
+
"code",
|
|
122
|
+
{
|
|
123
|
+
className: className ?? "",
|
|
124
|
+
style: {
|
|
125
|
+
display: "block",
|
|
126
|
+
padding: "var(--sp-4)",
|
|
127
|
+
fontSize: "var(--brand-text-sm)",
|
|
128
|
+
fontFamily: "var(--brand-font-mono)",
|
|
129
|
+
color: "var(--text-primary)"
|
|
130
|
+
},
|
|
131
|
+
children
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
138
|
+
"code",
|
|
139
|
+
{
|
|
140
|
+
style: {
|
|
141
|
+
backgroundColor: "var(--bg-raised)",
|
|
142
|
+
color: "var(--accent-bright)",
|
|
143
|
+
borderRadius: "var(--brand-radius-sm)",
|
|
144
|
+
padding: "2px 6px",
|
|
145
|
+
fontSize: "var(--brand-text-sm)",
|
|
146
|
+
fontFamily: "var(--brand-font-mono)"
|
|
147
|
+
},
|
|
148
|
+
children
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
},
|
|
152
|
+
ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
153
|
+
"ul",
|
|
154
|
+
{
|
|
155
|
+
style: {
|
|
156
|
+
marginBottom: "var(--sp-4)",
|
|
157
|
+
paddingLeft: "var(--sp-4)",
|
|
158
|
+
listStyleType: "disc",
|
|
159
|
+
color: "var(--text-secondary)",
|
|
160
|
+
fontFamily: "var(--brand-font-body)"
|
|
161
|
+
},
|
|
162
|
+
children
|
|
163
|
+
}
|
|
164
|
+
),
|
|
165
|
+
ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
166
|
+
"ol",
|
|
167
|
+
{
|
|
168
|
+
style: {
|
|
169
|
+
marginBottom: "var(--sp-4)",
|
|
170
|
+
paddingLeft: "var(--sp-4)",
|
|
171
|
+
listStyleType: "decimal",
|
|
172
|
+
color: "var(--text-secondary)",
|
|
173
|
+
fontFamily: "var(--brand-font-body)"
|
|
174
|
+
},
|
|
175
|
+
children
|
|
176
|
+
}
|
|
177
|
+
),
|
|
178
|
+
li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
179
|
+
import_themes.Text,
|
|
180
|
+
{
|
|
181
|
+
as: "p",
|
|
182
|
+
size: "3",
|
|
183
|
+
mb: "1",
|
|
184
|
+
style: {
|
|
185
|
+
fontFamily: "var(--brand-font-body)",
|
|
186
|
+
color: "var(--text-secondary)",
|
|
187
|
+
display: "list-item"
|
|
188
|
+
},
|
|
189
|
+
children
|
|
190
|
+
}
|
|
191
|
+
),
|
|
192
|
+
blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
193
|
+
import_themes.Box,
|
|
194
|
+
{
|
|
195
|
+
mb: "4",
|
|
196
|
+
pl: "4",
|
|
197
|
+
py: "2",
|
|
198
|
+
style: {
|
|
199
|
+
borderLeft: "2px solid var(--accent)",
|
|
200
|
+
backgroundColor: "var(--accent-subtle)",
|
|
201
|
+
borderRadius: "0 var(--brand-radius-md) var(--brand-radius-md) 0"
|
|
202
|
+
},
|
|
203
|
+
children
|
|
204
|
+
}
|
|
205
|
+
),
|
|
206
|
+
table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
207
|
+
"table",
|
|
208
|
+
{
|
|
209
|
+
style: {
|
|
210
|
+
width: "100%",
|
|
211
|
+
borderCollapse: "collapse",
|
|
212
|
+
fontSize: "var(--brand-text-sm)",
|
|
213
|
+
fontFamily: "var(--brand-font-body)"
|
|
214
|
+
},
|
|
215
|
+
children
|
|
216
|
+
}
|
|
217
|
+
) }),
|
|
218
|
+
th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
219
|
+
"th",
|
|
220
|
+
{
|
|
221
|
+
style: {
|
|
222
|
+
textAlign: "left",
|
|
223
|
+
padding: "8px 12px",
|
|
224
|
+
borderBottom: "1px solid var(--border-mid)",
|
|
225
|
+
color: "var(--text-primary)",
|
|
226
|
+
fontWeight: 500
|
|
227
|
+
},
|
|
228
|
+
children
|
|
229
|
+
}
|
|
230
|
+
),
|
|
231
|
+
td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
232
|
+
"td",
|
|
233
|
+
{
|
|
234
|
+
style: {
|
|
235
|
+
padding: "8px 12px",
|
|
236
|
+
borderBottom: "1px solid var(--border-subtle)",
|
|
237
|
+
color: "var(--text-secondary)"
|
|
238
|
+
},
|
|
239
|
+
children
|
|
240
|
+
}
|
|
241
|
+
),
|
|
242
|
+
hr: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { my: "6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, { size: "4" }) })
|
|
243
|
+
};
|
|
244
|
+
function BlogPost({
|
|
245
|
+
title,
|
|
246
|
+
date,
|
|
247
|
+
tags = [],
|
|
248
|
+
content,
|
|
249
|
+
readingTime,
|
|
250
|
+
onBack
|
|
251
|
+
}) {
|
|
252
|
+
const minutes = readingTime ?? calcReadingTime(content);
|
|
253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "blog-post", children: [
|
|
254
|
+
onBack && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "blog-post__back", onClick: onBack, children: "\u2190 Back" }),
|
|
255
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { children: [
|
|
256
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "blog-post__title", children: title }),
|
|
257
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blog-post__meta", children: [
|
|
258
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blog-post__meta-text", children: date }),
|
|
259
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blog-post__meta-dot", children: "\xB7" }),
|
|
260
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "blog-post__meta-text", children: [
|
|
261
|
+
minutes,
|
|
262
|
+
" min read"
|
|
263
|
+
] }),
|
|
264
|
+
tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
265
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blog-post__meta-dot", children: "\xB7" }),
|
|
266
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blog-post__tags", children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "blog-post__tag", children: tag }, tag)) })
|
|
267
|
+
] })
|
|
268
|
+
] })
|
|
269
|
+
] }),
|
|
270
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
271
|
+
import_react_markdown.default,
|
|
272
|
+
{
|
|
273
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
274
|
+
rehypePlugins: [import_rehype_highlight.default],
|
|
275
|
+
components: markdownComponents,
|
|
276
|
+
children: content
|
|
277
|
+
}
|
|
278
|
+
)
|
|
279
|
+
] });
|
|
280
|
+
}
|
|
281
|
+
|
|
47
282
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
48
|
-
var
|
|
283
|
+
var import_themes4 = require("@radix-ui/themes");
|
|
49
284
|
|
|
50
285
|
// src/components/DocsLayout/NavSidebar.tsx
|
|
51
|
-
var
|
|
52
|
-
var
|
|
286
|
+
var import_themes2 = require("@radix-ui/themes");
|
|
287
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
53
288
|
function NavStatusBadge({ status }) {
|
|
54
289
|
if (status === "final") return null;
|
|
55
|
-
return /* @__PURE__ */ (0,
|
|
290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Badge, { size: "1", variant: "soft", color: status === "draft" ? "yellow" : "gray", children: status });
|
|
56
291
|
}
|
|
57
292
|
function NavLeaf({
|
|
58
293
|
id,
|
|
@@ -64,14 +299,14 @@ function NavLeaf({
|
|
|
64
299
|
}) {
|
|
65
300
|
const isActive = slug === activeSlug;
|
|
66
301
|
const isDeprecated = status === "deprecated";
|
|
67
|
-
return /* @__PURE__ */ (0,
|
|
302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Box, { mb: "1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
68
303
|
"button",
|
|
69
304
|
{
|
|
70
305
|
type: "button",
|
|
71
306
|
onClick: () => onSlugChange(slug),
|
|
72
307
|
style: { width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0 },
|
|
73
|
-
children: /* @__PURE__ */ (0,
|
|
74
|
-
|
|
308
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
309
|
+
import_themes2.Flex,
|
|
75
310
|
{
|
|
76
311
|
align: "center",
|
|
77
312
|
justify: "between",
|
|
@@ -84,8 +319,8 @@ function NavLeaf({
|
|
|
84
319
|
].join(" "),
|
|
85
320
|
style: { minHeight: "30px" },
|
|
86
321
|
children: [
|
|
87
|
-
/* @__PURE__ */ (0,
|
|
88
|
-
|
|
322
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
323
|
+
import_themes2.Text,
|
|
89
324
|
{
|
|
90
325
|
as: "span",
|
|
91
326
|
size: "2",
|
|
@@ -97,7 +332,7 @@ function NavLeaf({
|
|
|
97
332
|
children: label
|
|
98
333
|
}
|
|
99
334
|
),
|
|
100
|
-
status && /* @__PURE__ */ (0,
|
|
335
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NavStatusBadge, { status })
|
|
101
336
|
]
|
|
102
337
|
}
|
|
103
338
|
)
|
|
@@ -110,7 +345,7 @@ function NavItemRow({
|
|
|
110
345
|
onSlugChange
|
|
111
346
|
}) {
|
|
112
347
|
if (item.slug) {
|
|
113
|
-
return /* @__PURE__ */ (0,
|
|
348
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
114
349
|
NavLeaf,
|
|
115
350
|
{
|
|
116
351
|
id: item.id,
|
|
@@ -122,10 +357,10 @@ function NavItemRow({
|
|
|
122
357
|
}
|
|
123
358
|
);
|
|
124
359
|
}
|
|
125
|
-
return /* @__PURE__ */ (0,
|
|
126
|
-
/* @__PURE__ */ (0,
|
|
127
|
-
/* @__PURE__ */ (0,
|
|
128
|
-
|
|
360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Box, { mb: "1", children: [
|
|
361
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Flex, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
|
|
362
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
363
|
+
import_themes2.Text,
|
|
129
364
|
{
|
|
130
365
|
as: "p",
|
|
131
366
|
size: "2",
|
|
@@ -138,9 +373,9 @@ function NavItemRow({
|
|
|
138
373
|
children: item.label
|
|
139
374
|
}
|
|
140
375
|
),
|
|
141
|
-
item.status && /* @__PURE__ */ (0,
|
|
376
|
+
item.status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NavStatusBadge, { status: item.status })
|
|
142
377
|
] }),
|
|
143
|
-
item.children && item.children.length > 0 && /* @__PURE__ */ (0,
|
|
378
|
+
item.children && item.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Box, { pl: "3", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
144
379
|
NavLeaf,
|
|
145
380
|
{
|
|
146
381
|
id: child.id,
|
|
@@ -155,8 +390,8 @@ function NavItemRow({
|
|
|
155
390
|
] });
|
|
156
391
|
}
|
|
157
392
|
function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
158
|
-
return /* @__PURE__ */ (0,
|
|
159
|
-
|
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
394
|
+
import_themes2.Box,
|
|
160
395
|
{
|
|
161
396
|
style: {
|
|
162
397
|
width: "256px",
|
|
@@ -168,16 +403,16 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
168
403
|
flexDirection: "column"
|
|
169
404
|
},
|
|
170
405
|
children: [
|
|
171
|
-
/* @__PURE__ */ (0,
|
|
172
|
-
|
|
406
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
407
|
+
import_themes2.Box,
|
|
173
408
|
{
|
|
174
409
|
px: "4",
|
|
175
410
|
py: "3",
|
|
176
411
|
style: { borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 },
|
|
177
|
-
children: /* @__PURE__ */ (0,
|
|
178
|
-
meta.logoUrl && /* @__PURE__ */ (0,
|
|
179
|
-
/* @__PURE__ */ (0,
|
|
180
|
-
|
|
412
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Flex, { align: "center", gap: "2", children: [
|
|
413
|
+
meta.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: meta.logoUrl, alt: meta.title, style: { height: "20px", width: "auto" } }),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
415
|
+
import_themes2.Heading,
|
|
181
416
|
{
|
|
182
417
|
as: "h2",
|
|
183
418
|
size: "3",
|
|
@@ -185,13 +420,13 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
185
420
|
children: meta.title
|
|
186
421
|
}
|
|
187
422
|
),
|
|
188
|
-
meta.version && /* @__PURE__ */ (0,
|
|
423
|
+
meta.version && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Badge, { size: "1", variant: "soft", color: "violet", children: meta.version })
|
|
189
424
|
] })
|
|
190
425
|
}
|
|
191
426
|
),
|
|
192
|
-
/* @__PURE__ */ (0,
|
|
193
|
-
/* @__PURE__ */ (0,
|
|
194
|
-
|
|
427
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.ScrollArea, { scrollbars: "vertical", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Box, { p: "4", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Box, { mb: "4", children: [
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
429
|
+
import_themes2.Text,
|
|
195
430
|
{
|
|
196
431
|
as: "p",
|
|
197
432
|
size: "1",
|
|
@@ -207,8 +442,8 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
207
442
|
children: section.label
|
|
208
443
|
}
|
|
209
444
|
),
|
|
210
|
-
/* @__PURE__ */ (0,
|
|
211
|
-
section.items.map((item) => /* @__PURE__ */ (0,
|
|
445
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Separator, { size: "4", mb: "2" }),
|
|
446
|
+
section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
212
447
|
NavItemRow,
|
|
213
448
|
{
|
|
214
449
|
item,
|
|
@@ -224,14 +459,14 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
224
459
|
}
|
|
225
460
|
|
|
226
461
|
// src/components/DocsLayout/MarkdownContent.tsx
|
|
227
|
-
var
|
|
228
|
-
var
|
|
229
|
-
var
|
|
230
|
-
var
|
|
231
|
-
var
|
|
232
|
-
var
|
|
233
|
-
h1: ({ children }) => /* @__PURE__ */ (0,
|
|
234
|
-
|
|
462
|
+
var import_react_markdown2 = __toESM(require("react-markdown"), 1);
|
|
463
|
+
var import_remark_gfm2 = __toESM(require("remark-gfm"), 1);
|
|
464
|
+
var import_rehype_highlight2 = __toESM(require("rehype-highlight"), 1);
|
|
465
|
+
var import_themes3 = require("@radix-ui/themes");
|
|
466
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
467
|
+
var markdownComponents2 = {
|
|
468
|
+
h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
469
|
+
import_themes3.Heading,
|
|
235
470
|
{
|
|
236
471
|
as: "h1",
|
|
237
472
|
size: "7",
|
|
@@ -240,8 +475,8 @@ var markdownComponents = {
|
|
|
240
475
|
children
|
|
241
476
|
}
|
|
242
477
|
),
|
|
243
|
-
h2: ({ children }) => /* @__PURE__ */ (0,
|
|
244
|
-
|
|
478
|
+
h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
479
|
+
import_themes3.Heading,
|
|
245
480
|
{
|
|
246
481
|
as: "h2",
|
|
247
482
|
size: "5",
|
|
@@ -251,8 +486,8 @@ var markdownComponents = {
|
|
|
251
486
|
children
|
|
252
487
|
}
|
|
253
488
|
),
|
|
254
|
-
h3: ({ children }) => /* @__PURE__ */ (0,
|
|
255
|
-
|
|
489
|
+
h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
490
|
+
import_themes3.Heading,
|
|
256
491
|
{
|
|
257
492
|
as: "h3",
|
|
258
493
|
size: "4",
|
|
@@ -262,8 +497,8 @@ var markdownComponents = {
|
|
|
262
497
|
children
|
|
263
498
|
}
|
|
264
499
|
),
|
|
265
|
-
p: ({ children }) => /* @__PURE__ */ (0,
|
|
266
|
-
|
|
500
|
+
p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
501
|
+
import_themes3.Text,
|
|
267
502
|
{
|
|
268
503
|
as: "p",
|
|
269
504
|
size: "3",
|
|
@@ -277,7 +512,7 @@ var markdownComponents = {
|
|
|
277
512
|
children
|
|
278
513
|
}
|
|
279
514
|
),
|
|
280
|
-
a: ({ href, children }) => /* @__PURE__ */ (0,
|
|
515
|
+
a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
281
516
|
"a",
|
|
282
517
|
{
|
|
283
518
|
href: href ?? "#",
|
|
@@ -288,8 +523,8 @@ var markdownComponents = {
|
|
|
288
523
|
code: ({ className, children }) => {
|
|
289
524
|
const isBlock = className?.startsWith("language-");
|
|
290
525
|
if (isBlock) {
|
|
291
|
-
return /* @__PURE__ */ (0,
|
|
292
|
-
|
|
526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
527
|
+
import_themes3.Box,
|
|
293
528
|
{
|
|
294
529
|
mb: "4",
|
|
295
530
|
style: {
|
|
@@ -298,7 +533,7 @@ var markdownComponents = {
|
|
|
298
533
|
backgroundColor: "var(--bg-raised)",
|
|
299
534
|
overflowX: "auto"
|
|
300
535
|
},
|
|
301
|
-
children: /* @__PURE__ */ (0,
|
|
536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
302
537
|
"code",
|
|
303
538
|
{
|
|
304
539
|
className: className ?? "",
|
|
@@ -315,7 +550,7 @@ var markdownComponents = {
|
|
|
315
550
|
}
|
|
316
551
|
);
|
|
317
552
|
}
|
|
318
|
-
return /* @__PURE__ */ (0,
|
|
553
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
319
554
|
"code",
|
|
320
555
|
{
|
|
321
556
|
style: {
|
|
@@ -330,7 +565,7 @@ var markdownComponents = {
|
|
|
330
565
|
}
|
|
331
566
|
);
|
|
332
567
|
},
|
|
333
|
-
ul: ({ children }) => /* @__PURE__ */ (0,
|
|
568
|
+
ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
334
569
|
"ul",
|
|
335
570
|
{
|
|
336
571
|
style: {
|
|
@@ -343,7 +578,7 @@ var markdownComponents = {
|
|
|
343
578
|
children
|
|
344
579
|
}
|
|
345
580
|
),
|
|
346
|
-
ol: ({ children }) => /* @__PURE__ */ (0,
|
|
581
|
+
ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
347
582
|
"ol",
|
|
348
583
|
{
|
|
349
584
|
style: {
|
|
@@ -356,8 +591,8 @@ var markdownComponents = {
|
|
|
356
591
|
children
|
|
357
592
|
}
|
|
358
593
|
),
|
|
359
|
-
li: ({ children }) => /* @__PURE__ */ (0,
|
|
360
|
-
|
|
594
|
+
li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
595
|
+
import_themes3.Text,
|
|
361
596
|
{
|
|
362
597
|
as: "p",
|
|
363
598
|
size: "3",
|
|
@@ -370,8 +605,8 @@ var markdownComponents = {
|
|
|
370
605
|
children
|
|
371
606
|
}
|
|
372
607
|
),
|
|
373
|
-
blockquote: ({ children }) => /* @__PURE__ */ (0,
|
|
374
|
-
|
|
608
|
+
blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
609
|
+
import_themes3.Box,
|
|
375
610
|
{
|
|
376
611
|
mb: "4",
|
|
377
612
|
pl: "4",
|
|
@@ -384,7 +619,7 @@ var markdownComponents = {
|
|
|
384
619
|
children
|
|
385
620
|
}
|
|
386
621
|
),
|
|
387
|
-
table: ({ children }) => /* @__PURE__ */ (0,
|
|
622
|
+
table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Box, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
388
623
|
"table",
|
|
389
624
|
{
|
|
390
625
|
style: {
|
|
@@ -396,7 +631,7 @@ var markdownComponents = {
|
|
|
396
631
|
children
|
|
397
632
|
}
|
|
398
633
|
) }),
|
|
399
|
-
th: ({ children }) => /* @__PURE__ */ (0,
|
|
634
|
+
th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
400
635
|
"th",
|
|
401
636
|
{
|
|
402
637
|
style: {
|
|
@@ -409,7 +644,7 @@ var markdownComponents = {
|
|
|
409
644
|
children
|
|
410
645
|
}
|
|
411
646
|
),
|
|
412
|
-
td: ({ children }) => /* @__PURE__ */ (0,
|
|
647
|
+
td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
413
648
|
"td",
|
|
414
649
|
{
|
|
415
650
|
style: {
|
|
@@ -420,22 +655,22 @@ var markdownComponents = {
|
|
|
420
655
|
children
|
|
421
656
|
}
|
|
422
657
|
),
|
|
423
|
-
hr: () => /* @__PURE__ */ (0,
|
|
658
|
+
hr: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Flex, { my: "6", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Separator, { size: "4" }) })
|
|
424
659
|
};
|
|
425
660
|
function MarkdownContent({ content }) {
|
|
426
|
-
return /* @__PURE__ */ (0,
|
|
427
|
-
|
|
661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
662
|
+
import_react_markdown2.default,
|
|
428
663
|
{
|
|
429
|
-
remarkPlugins: [
|
|
430
|
-
rehypePlugins: [
|
|
431
|
-
components:
|
|
664
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
665
|
+
rehypePlugins: [import_rehype_highlight2.default],
|
|
666
|
+
components: markdownComponents2,
|
|
432
667
|
children: content
|
|
433
668
|
}
|
|
434
669
|
);
|
|
435
670
|
}
|
|
436
671
|
|
|
437
672
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
438
|
-
var
|
|
673
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
439
674
|
var PAGE_TYPE_COLORS = {
|
|
440
675
|
prd: "violet",
|
|
441
676
|
adr: "blue",
|
|
@@ -443,13 +678,13 @@ var PAGE_TYPE_COLORS = {
|
|
|
443
678
|
reference: "gray"
|
|
444
679
|
};
|
|
445
680
|
function PageTypeBadge({ type }) {
|
|
446
|
-
return /* @__PURE__ */ (0,
|
|
681
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Badge, { size: "1", variant: "soft", color: PAGE_TYPE_COLORS[type], children: type.toUpperCase() });
|
|
447
682
|
}
|
|
448
683
|
function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
449
684
|
const { meta, navigation, pages } = data;
|
|
450
685
|
const page = pages[activeSlug];
|
|
451
|
-
return /* @__PURE__ */ (0,
|
|
452
|
-
/* @__PURE__ */ (0,
|
|
686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Flex, { direction: "column", style: { height: "100vh", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Flex, { direction: "row", style: { flex: 1, overflow: "hidden" }, children: [
|
|
687
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
453
688
|
NavSidebar,
|
|
454
689
|
{
|
|
455
690
|
meta,
|
|
@@ -458,11 +693,11 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
458
693
|
onSlugChange
|
|
459
694
|
}
|
|
460
695
|
),
|
|
461
|
-
/* @__PURE__ */ (0,
|
|
462
|
-
/* @__PURE__ */ (0,
|
|
463
|
-
page.type && /* @__PURE__ */ (0,
|
|
464
|
-
page.lastUpdated && /* @__PURE__ */ (0,
|
|
465
|
-
|
|
696
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Box, { style: { flex: 1, overflow: "hidden", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.ScrollArea, { scrollbars: "vertical", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Box, { p: "8", style: { maxWidth: "768px", margin: "0 auto" }, children: !page ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Flex, { align: "center", justify: "center", style: { height: "300px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Text, { size: "3", style: { color: "var(--text-muted)" }, children: "Page not found" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
697
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Flex, { align: "center", gap: "3", mb: "3", children: [
|
|
698
|
+
page.type && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PageTypeBadge, { type: page.type }),
|
|
699
|
+
page.lastUpdated && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
700
|
+
import_themes4.Text,
|
|
466
701
|
{
|
|
467
702
|
size: "1",
|
|
468
703
|
style: { color: "var(--text-muted)", fontFamily: "var(--brand-font-body)" },
|
|
@@ -473,8 +708,8 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
473
708
|
}
|
|
474
709
|
)
|
|
475
710
|
] }),
|
|
476
|
-
/* @__PURE__ */ (0,
|
|
477
|
-
|
|
711
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
712
|
+
import_themes4.Heading,
|
|
478
713
|
{
|
|
479
714
|
as: "h1",
|
|
480
715
|
size: "8",
|
|
@@ -486,51 +721,51 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
486
721
|
children: page.title
|
|
487
722
|
}
|
|
488
723
|
),
|
|
489
|
-
/* @__PURE__ */ (0,
|
|
490
|
-
/* @__PURE__ */ (0,
|
|
724
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Separator, { size: "4", mb: "6" }),
|
|
725
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MarkdownContent, { content: page.content })
|
|
491
726
|
] }) }) }) })
|
|
492
727
|
] }) });
|
|
493
728
|
}
|
|
494
729
|
|
|
495
730
|
// src/components/Logo/Logo.tsx
|
|
496
|
-
var
|
|
731
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
497
732
|
function AgMark({ size = 64, variant = "dark" }) {
|
|
498
733
|
const aPrimary = variant === "light" ? "#4A3FCC" : variant === "glow" ? "#9B8FFB" : "#7C6EFA";
|
|
499
734
|
const gPrimary = variant === "light" ? "#0A0A0B" : "#F0EEF8";
|
|
500
735
|
const bgFill = variant === "light" ? "#F0EEF8" : variant === "glow" ? "url(#agGlowGrad)" : "#111113";
|
|
501
|
-
return /* @__PURE__ */ (0,
|
|
502
|
-
variant === "glow" && /* @__PURE__ */ (0,
|
|
503
|
-
/* @__PURE__ */ (0,
|
|
504
|
-
/* @__PURE__ */ (0,
|
|
736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 64 64", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
737
|
+
variant === "glow" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("radialGradient", { id: "agGlowGrad", cx: "30%", cy: "30%", r: "80%", children: [
|
|
738
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "0%", stopColor: "#1A1630" }),
|
|
739
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "100%", stopColor: "#0D0C1A" })
|
|
505
740
|
] }) }),
|
|
506
|
-
/* @__PURE__ */ (0,
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
508
|
-
/* @__PURE__ */ (0,
|
|
509
|
-
/* @__PURE__ */ (0,
|
|
510
|
-
/* @__PURE__ */ (0,
|
|
741
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "64", height: "64", rx: "14", fill: bgFill }),
|
|
742
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 46 L24 20 L34 46", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
743
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "37", x2: "30", y2: "37", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round" }),
|
|
744
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" }),
|
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" })
|
|
511
746
|
] });
|
|
512
747
|
}
|
|
513
748
|
function AgWordmark() {
|
|
514
|
-
return /* @__PURE__ */ (0,
|
|
515
|
-
/* @__PURE__ */ (0,
|
|
516
|
-
/* @__PURE__ */ (0,
|
|
517
|
-
/* @__PURE__ */ (0,
|
|
518
|
-
/* @__PURE__ */ (0,
|
|
519
|
-
/* @__PURE__ */ (0,
|
|
520
|
-
/* @__PURE__ */ (0,
|
|
749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
750
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
|
|
751
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "36", height: "36", rx: "8", fill: "#18181C" }),
|
|
752
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 26 L13 10 L20 26", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
753
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", y1: "20.5", x2: "17", y2: "20.5", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
754
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" }),
|
|
755
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" })
|
|
521
756
|
] }),
|
|
522
|
-
/* @__PURE__ */ (0,
|
|
757
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { fontFamily: "var(--brand-font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-primary)", letterSpacing: "-0.02em" }, children: [
|
|
523
758
|
"Adarsh",
|
|
524
|
-
/* @__PURE__ */ (0,
|
|
759
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--accent)" }, children: "." })
|
|
525
760
|
] })
|
|
526
761
|
] });
|
|
527
762
|
}
|
|
528
763
|
|
|
529
764
|
// src/components/Footer/Footer.tsx
|
|
530
|
-
var
|
|
765
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
531
766
|
function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
532
767
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
533
|
-
return /* @__PURE__ */ (0,
|
|
768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
|
|
534
769
|
paddingTop: "var(--sp-16)",
|
|
535
770
|
paddingBottom: "var(--sp-8)",
|
|
536
771
|
borderTop: "1px solid var(--border-subtle)",
|
|
@@ -540,13 +775,13 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
|
540
775
|
flexWrap: "wrap",
|
|
541
776
|
gap: "var(--sp-4)"
|
|
542
777
|
}, children: [
|
|
543
|
-
/* @__PURE__ */ (0,
|
|
544
|
-
/* @__PURE__ */ (0,
|
|
545
|
-
/* @__PURE__ */ (0,
|
|
546
|
-
/* @__PURE__ */ (0,
|
|
547
|
-
/* @__PURE__ */ (0,
|
|
778
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AgWordmark, {}),
|
|
779
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
780
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
|
|
781
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6", cy: "6", r: "5.5", stroke: "var(--border-soft)" }),
|
|
782
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 4.5A2.5 2.5 0 1 0 8 7.5", stroke: "var(--text-disabled)", strokeWidth: "1", strokeLinecap: "round" })
|
|
548
783
|
] }),
|
|
549
|
-
/* @__PURE__ */ (0,
|
|
784
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
|
|
550
785
|
year,
|
|
551
786
|
" Adarsh Goswami. All rights reserved."
|
|
552
787
|
] })
|
|
@@ -556,7 +791,7 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
|
556
791
|
|
|
557
792
|
// src/components/Theme/ThemeProvider.tsx
|
|
558
793
|
var import_react2 = require("react");
|
|
559
|
-
var
|
|
794
|
+
var import_themes5 = require("@radix-ui/themes");
|
|
560
795
|
|
|
561
796
|
// src/components/Theme/ThemeContext.ts
|
|
562
797
|
var import_react = require("react");
|
|
@@ -570,7 +805,7 @@ function useTheme() {
|
|
|
570
805
|
}
|
|
571
806
|
|
|
572
807
|
// src/components/Theme/ThemeProvider.tsx
|
|
573
|
-
var
|
|
808
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
574
809
|
function ThemeProvider({
|
|
575
810
|
children,
|
|
576
811
|
defaultTheme = "dark"
|
|
@@ -586,16 +821,16 @@ function ThemeProvider({
|
|
|
586
821
|
const toggleTheme = (0, import_react2.useCallback)(() => {
|
|
587
822
|
setThemeState((prev) => prev === "dark" ? "light" : "dark");
|
|
588
823
|
}, []);
|
|
589
|
-
return /* @__PURE__ */ (0,
|
|
824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes5.Theme, { appearance: theme, children }) });
|
|
590
825
|
}
|
|
591
826
|
|
|
592
827
|
// src/components/Theme/ThemeToggle.tsx
|
|
593
|
-
var
|
|
594
|
-
var
|
|
828
|
+
var import_themes6 = require("@radix-ui/themes");
|
|
829
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
595
830
|
function ThemeToggle({ "aria-label": ariaLabel = "Toggle theme" }) {
|
|
596
831
|
const { theme, toggleTheme } = useTheme();
|
|
597
|
-
return /* @__PURE__ */ (0,
|
|
598
|
-
|
|
832
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
833
|
+
import_themes6.Switch,
|
|
599
834
|
{
|
|
600
835
|
size: "2",
|
|
601
836
|
className: "ag-theme-toggle",
|
|
@@ -668,7 +903,7 @@ var package_default = {
|
|
|
668
903
|
};
|
|
669
904
|
|
|
670
905
|
// src/components/ThemePage/ThemePage.tsx
|
|
671
|
-
var
|
|
906
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
672
907
|
function useTokenMap(tokens) {
|
|
673
908
|
const [map, setMap] = (0, import_react3.useState)({});
|
|
674
909
|
(0, import_react3.useEffect)(() => {
|
|
@@ -680,7 +915,7 @@ function useTokenMap(tokens) {
|
|
|
680
915
|
return map;
|
|
681
916
|
}
|
|
682
917
|
function SectionLabel({ children }) {
|
|
683
|
-
return /* @__PURE__ */ (0,
|
|
918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: {
|
|
684
919
|
fontFamily: "var(--brand-font-mono)",
|
|
685
920
|
fontSize: "var(--brand-text-xs)",
|
|
686
921
|
letterSpacing: "0.1em",
|
|
@@ -690,29 +925,29 @@ function SectionLabel({ children }) {
|
|
|
690
925
|
}, children });
|
|
691
926
|
}
|
|
692
927
|
function Section({ label, title, description, children, first }) {
|
|
693
|
-
return /* @__PURE__ */ (0,
|
|
928
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { style: {
|
|
694
929
|
marginBottom: "var(--sp-24)",
|
|
695
930
|
paddingTop: first ? 0 : "var(--sp-24)",
|
|
696
931
|
borderTop: first ? "none" : "1px solid var(--border-subtle)"
|
|
697
932
|
}, children: [
|
|
698
|
-
/* @__PURE__ */ (0,
|
|
699
|
-
/* @__PURE__ */ (0,
|
|
700
|
-
description && /* @__PURE__ */ (0,
|
|
933
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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 }),
|
|
934
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-2xl)", fontWeight: 700, color: "var(--text-primary)", marginBottom: "var(--sp-2)" }, children: title }),
|
|
935
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", marginBottom: "var(--sp-8)", maxWidth: 480 }, children: description }),
|
|
701
936
|
children
|
|
702
937
|
] });
|
|
703
938
|
}
|
|
704
939
|
function ColorSwatch({ token, label, values }) {
|
|
705
|
-
return /* @__PURE__ */ (0,
|
|
706
|
-
/* @__PURE__ */ (0,
|
|
707
|
-
/* @__PURE__ */ (0,
|
|
708
|
-
/* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
710
|
-
values[token] && /* @__PURE__ */ (0,
|
|
940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
|
|
941
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 56, background: `var(${token})` } }),
|
|
942
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", fontWeight: 500, color: "var(--text-primary)", marginBottom: 2 }, children: label }),
|
|
944
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-muted)" }, children: token }),
|
|
945
|
+
values[token] && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: values[token] })
|
|
711
946
|
] })
|
|
712
947
|
] });
|
|
713
948
|
}
|
|
714
949
|
function ColorGrid({ children }) {
|
|
715
|
-
return /* @__PURE__ */ (0,
|
|
950
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "var(--sp-3)" }, children });
|
|
716
951
|
}
|
|
717
952
|
var COLOR_TOKENS = [
|
|
718
953
|
"--bg-base",
|
|
@@ -809,128 +1044,128 @@ function fontFamilyVar(family) {
|
|
|
809
1044
|
function ComponentsSection() {
|
|
810
1045
|
const [tooltipVisible, setTooltipVisible] = (0, import_react3.useState)(false);
|
|
811
1046
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
812
|
-
return /* @__PURE__ */ (0,
|
|
813
|
-
/* @__PURE__ */ (0,
|
|
814
|
-
/* @__PURE__ */ (0,
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
816
|
-
/* @__PURE__ */ (0,
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
818
|
-
/* @__PURE__ */ (0,
|
|
819
|
-
/* @__PURE__ */ (0,
|
|
1047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
|
|
1048
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1049
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Buttons" }),
|
|
1050
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
|
|
1051
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("primary"), children: "Deploy service" }),
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("secondary"), children: "View source" }),
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("ghost"), children: "Cancel" }),
|
|
1054
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("danger"), children: "Delete" })
|
|
820
1055
|
] }),
|
|
821
|
-
/* @__PURE__ */ (0,
|
|
822
|
-
/* @__PURE__ */ (0,
|
|
823
|
-
/* @__PURE__ */ (0,
|
|
824
|
-
/* @__PURE__ */ (0,
|
|
1056
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
1057
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Small" }),
|
|
1058
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("primary"), children: "Default" }),
|
|
1059
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...btnStyle("primary"), ...btnSize("lg") }, children: "Large" })
|
|
825
1060
|
] })
|
|
826
1061
|
] }),
|
|
827
|
-
/* @__PURE__ */ (0,
|
|
828
|
-
/* @__PURE__ */ (0,
|
|
829
|
-
/* @__PURE__ */ (0,
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1063
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Badges" }),
|
|
1064
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
830
1065
|
{ label: "Default", bg: "var(--bg-overlay)", color: "var(--text-secondary)", border: "var(--border-soft)" },
|
|
831
1066
|
{ label: "\u25CF Live", bg: "var(--accent-subtle)", color: "var(--accent-bright)", border: "var(--accent-border)" },
|
|
832
1067
|
{ label: "\u25CF Active", bg: "var(--success-bg)", color: "var(--success)", border: "var(--success-border)" },
|
|
833
1068
|
{ label: "\u25CF Degraded", bg: "var(--warning-bg)", color: "var(--warning)", border: "var(--warning-border)" },
|
|
834
1069
|
{ label: "\u25CF Offline", bg: "var(--error-bg)", color: "var(--error)", border: "var(--error-border)" }
|
|
835
|
-
].map((b) => /* @__PURE__ */ (0,
|
|
1070
|
+
].map((b) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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)) })
|
|
836
1071
|
] }),
|
|
837
|
-
/* @__PURE__ */ (0,
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
1072
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1073
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Cards" }),
|
|
1074
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
840
1075
|
{ icon: "\u{1F510}", title: "Auth Service", body: "JWT-based auth with refresh tokens, OAuth2, and session management." },
|
|
841
1076
|
{ icon: "\u{1F4B3}", title: "Payments", body: "Stripe-powered billing with webhooks, subscriptions, and invoicing." },
|
|
842
1077
|
{ icon: "\u{1F4E8}", title: "Notifications", body: "Email, push, and in-app notification service with templates." }
|
|
843
|
-
].map((card) => /* @__PURE__ */ (0,
|
|
844
|
-
/* @__PURE__ */ (0,
|
|
845
|
-
/* @__PURE__ */ (0,
|
|
846
|
-
/* @__PURE__ */ (0,
|
|
1078
|
+
].map((card) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-6)" }, children: [
|
|
1079
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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 }),
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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 }),
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.6 }, children: card.body })
|
|
847
1082
|
] }, card.title)) })
|
|
848
1083
|
] }),
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
850
|
-
/* @__PURE__ */ (0,
|
|
851
|
-
/* @__PURE__ */ (0,
|
|
852
|
-
/* @__PURE__ */ (0,
|
|
853
|
-
/* @__PURE__ */ (0,
|
|
854
|
-
/* @__PURE__ */ (0,
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1085
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Form Inputs" }),
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
|
|
1087
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1088
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { style: labelStyle, children: "Project name" }),
|
|
1089
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { readOnly: true, style: inputStyle(), placeholder: "my-awesome-app", defaultValue: "" })
|
|
855
1090
|
] }),
|
|
856
|
-
/* @__PURE__ */ (0,
|
|
857
|
-
/* @__PURE__ */ (0,
|
|
858
|
-
/* @__PURE__ */ (0,
|
|
859
|
-
/* @__PURE__ */ (0,
|
|
1091
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1092
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { style: labelStyle, children: "API Key" }),
|
|
1093
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { readOnly: true, style: { ...inputStyle(), ...mono, fontSize: 13 }, defaultValue: "ag_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u20223fa2" }),
|
|
1094
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, color: "var(--text-muted)" }, children: "Keep this secret. Rotate from the dashboard." })
|
|
860
1095
|
] }),
|
|
861
|
-
/* @__PURE__ */ (0,
|
|
862
|
-
/* @__PURE__ */ (0,
|
|
863
|
-
/* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
1096
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1097
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { style: labelStyle, children: "Status" }),
|
|
1098
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { readOnly: true, style: inputStyle("error"), defaultValue: "invalid-slug!" }),
|
|
1099
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, color: "var(--error)" }, children: "Only lowercase letters, numbers, and hyphens." })
|
|
865
1100
|
] })
|
|
866
1101
|
] })
|
|
867
1102
|
] }),
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
/* @__PURE__ */ (0,
|
|
870
|
-
/* @__PURE__ */ (0,
|
|
871
|
-
/* @__PURE__ */ (0,
|
|
1103
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1104
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Code Block" }),
|
|
1105
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1106
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--text-disabled)" }, children: "// Initialize AG Auth" }),
|
|
872
1107
|
"\n",
|
|
873
|
-
/* @__PURE__ */ (0,
|
|
1108
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "import" }),
|
|
874
1109
|
" { createClient } ",
|
|
875
|
-
/* @__PURE__ */ (0,
|
|
1110
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "from" }),
|
|
876
1111
|
" ",
|
|
877
|
-
/* @__PURE__ */ (0,
|
|
1112
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--success)" }, children: "'@ag/auth'" }),
|
|
878
1113
|
"\n\n",
|
|
879
|
-
/* @__PURE__ */ (0,
|
|
1114
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "const" }),
|
|
880
1115
|
" auth = ",
|
|
881
|
-
/* @__PURE__ */ (0,
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--info)" }, children: "createClient" }),
|
|
882
1117
|
"({\n",
|
|
883
1118
|
" projectId: ",
|
|
884
|
-
/* @__PURE__ */ (0,
|
|
1119
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--success)" }, children: "'proj_xxxxxxxx'" }),
|
|
885
1120
|
",\n",
|
|
886
1121
|
" secret: process.env.",
|
|
887
|
-
/* @__PURE__ */ (0,
|
|
1122
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--info)" }, children: "AG_SECRET" }),
|
|
888
1123
|
",\n",
|
|
889
1124
|
" ttl: ",
|
|
890
|
-
/* @__PURE__ */ (0,
|
|
1125
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--warning)" }, children: "3600" }),
|
|
891
1126
|
",\n",
|
|
892
1127
|
"})\n\n",
|
|
893
|
-
/* @__PURE__ */ (0,
|
|
1128
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "export default" }),
|
|
894
1129
|
" auth"
|
|
895
1130
|
] })
|
|
896
1131
|
] }),
|
|
897
|
-
/* @__PURE__ */ (0,
|
|
898
|
-
/* @__PURE__ */ (0,
|
|
899
|
-
/* @__PURE__ */ (0,
|
|
900
|
-
/* @__PURE__ */ (0,
|
|
901
|
-
/* @__PURE__ */ (0,
|
|
902
|
-
/* @__PURE__ */ (0,
|
|
903
|
-
/* @__PURE__ */ (0,
|
|
904
|
-
/* @__PURE__ */ (0,
|
|
905
|
-
/* @__PURE__ */ (0,
|
|
1132
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1133
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Navigation" }),
|
|
1134
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1135
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1136
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 18 L9 6 L14 18", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
1138
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "14", x2: "12", y2: "14", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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" }),
|
|
1140
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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" })
|
|
906
1141
|
] }),
|
|
907
1142
|
"Adarsh"
|
|
908
1143
|
] }),
|
|
909
|
-
/* @__PURE__ */ (0,
|
|
910
|
-
/* @__PURE__ */ (0,
|
|
911
|
-
/* @__PURE__ */ (0,
|
|
912
|
-
/* @__PURE__ */ (0,
|
|
1144
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: "var(--sp-6)", listStyle: "none" }, children: ["Work", "Services", "Blog", "Contact"].map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "var(--brand-text-sm)", color: i === 0 ? "var(--accent-bright)" : "var(--text-secondary)", cursor: "pointer" }, children: link }, link)) }),
|
|
1145
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
1146
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeToggle, {}),
|
|
1147
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Hire me" })
|
|
913
1148
|
] })
|
|
914
1149
|
] })
|
|
915
1150
|
] }),
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
917
|
-
/* @__PURE__ */ (0,
|
|
918
|
-
/* @__PURE__ */ (0,
|
|
1151
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1152
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Tooltip" }),
|
|
1153
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
919
1154
|
"div",
|
|
920
1155
|
{
|
|
921
1156
|
style: { position: "relative", display: "inline-block" },
|
|
922
1157
|
onMouseEnter: () => setTooltipVisible(true),
|
|
923
1158
|
onMouseLeave: () => setTooltipVisible(false),
|
|
924
1159
|
children: [
|
|
925
|
-
/* @__PURE__ */ (0,
|
|
926
|
-
tooltipVisible && /* @__PURE__ */ (0,
|
|
1160
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("secondary"), children: "Hover me" }),
|
|
1161
|
+
tooltipVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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" })
|
|
927
1162
|
]
|
|
928
1163
|
}
|
|
929
1164
|
)
|
|
930
1165
|
] }),
|
|
931
|
-
/* @__PURE__ */ (0,
|
|
932
|
-
/* @__PURE__ */ (0,
|
|
933
|
-
/* @__PURE__ */ (0,
|
|
1166
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1167
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Tags" }),
|
|
1168
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-2)" }, children: ["typescript", "react", "node.js", "postgres", "redis", "docker"].map((tag) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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)) })
|
|
934
1169
|
] })
|
|
935
1170
|
] });
|
|
936
1171
|
}
|
|
@@ -982,7 +1217,7 @@ function ThemePage({ version = package_default.version }) {
|
|
|
982
1217
|
const colorValues = useTokenMap(COLOR_TOKENS);
|
|
983
1218
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
984
1219
|
const dot = { width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block" };
|
|
985
|
-
return /* @__PURE__ */ (0,
|
|
1220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
|
|
986
1221
|
background: "var(--bg-base)",
|
|
987
1222
|
color: "var(--text-primary)",
|
|
988
1223
|
fontFamily: "var(--brand-font-body)",
|
|
@@ -990,9 +1225,9 @@ function ThemePage({ version = package_default.version }) {
|
|
|
990
1225
|
lineHeight: 1.6,
|
|
991
1226
|
WebkitFontSmoothing: "antialiased",
|
|
992
1227
|
minHeight: "100vh"
|
|
993
|
-
}, children: /* @__PURE__ */ (0,
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
995
|
-
/* @__PURE__ */ (0,
|
|
1228
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { maxWidth: "var(--brand-layout-container-max)", margin: "0 auto", padding: "var(--sp-16) var(--sp-8)" }, children: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
|
|
996
1231
|
position: "absolute",
|
|
997
1232
|
top: -80,
|
|
998
1233
|
left: -120,
|
|
@@ -1001,131 +1236,131 @@ function ThemePage({ version = package_default.version }) {
|
|
|
1001
1236
|
background: "radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%)",
|
|
1002
1237
|
pointerEvents: "none"
|
|
1003
1238
|
} }),
|
|
1004
|
-
/* @__PURE__ */ (0,
|
|
1005
|
-
/* @__PURE__ */ (0,
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: 24, height: 1, background: "var(--border-mid)", display: "inline-block" } }),
|
|
1006
1241
|
"@adarsh_goswami/brand",
|
|
1007
|
-
version && /* @__PURE__ */ (0,
|
|
1242
|
+
version && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1008
1243
|
"v",
|
|
1009
1244
|
version
|
|
1010
1245
|
] })
|
|
1011
1246
|
] }),
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1013
|
-
/* @__PURE__ */ (0,
|
|
1014
|
-
/* @__PURE__ */ (0,
|
|
1015
|
-
/* @__PURE__ */ (0,
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--text-primary)" }, children: "Design" }),
|
|
1249
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", {}),
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent)" }, children: "System" })
|
|
1016
1251
|
] }),
|
|
1017
|
-
/* @__PURE__ */ (0,
|
|
1018
|
-
/* @__PURE__ */ (0,
|
|
1019
|
-
/* @__PURE__ */ (0,
|
|
1252
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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." }),
|
|
1253
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: dot }),
|
|
1020
1255
|
tech
|
|
1021
1256
|
] }, tech)) })
|
|
1022
1257
|
] }),
|
|
1023
|
-
/* @__PURE__ */ (0,
|
|
1024
|
-
/* @__PURE__ */ (0,
|
|
1025
|
-
/* @__PURE__ */ (0,
|
|
1026
|
-
/* @__PURE__ */ (0,
|
|
1258
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
1259
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: logoCardStyle("dark"), children: [
|
|
1260
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgMark, { size: 64, variant: "dark" }),
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("dark"), children: "Primary \u2014 Dark" })
|
|
1027
1262
|
] }),
|
|
1028
|
-
/* @__PURE__ */ (0,
|
|
1029
|
-
/* @__PURE__ */ (0,
|
|
1030
|
-
/* @__PURE__ */ (0,
|
|
1263
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: logoCardStyle("glow"), children: [
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgMark, { size: 64, variant: "glow" }),
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("dark"), children: "Glow Variant" })
|
|
1031
1266
|
] }),
|
|
1032
|
-
/* @__PURE__ */ (0,
|
|
1033
|
-
/* @__PURE__ */ (0,
|
|
1034
|
-
/* @__PURE__ */ (0,
|
|
1267
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: logoCardStyle("light"), children: [
|
|
1268
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgMark, { size: 64, variant: "light" }),
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("light"), children: "Light Variant" })
|
|
1035
1270
|
] }),
|
|
1036
|
-
/* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1038
|
-
/* @__PURE__ */ (0,
|
|
1271
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
|
|
1272
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgWordmark, {}),
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("dark"), children: "Wordmark" })
|
|
1039
1274
|
] })
|
|
1040
1275
|
] }) }),
|
|
1041
|
-
/* @__PURE__ */ (0,
|
|
1042
|
-
/* @__PURE__ */ (0,
|
|
1043
|
-
/* @__PURE__ */ (0,
|
|
1044
|
-
/* @__PURE__ */ (0,
|
|
1045
|
-
/* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(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: [
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Accent" }),
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent-bright", label: "Bright", values: colorValues }),
|
|
1280
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent", label: "Base", values: colorValues }),
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent-dim", label: "Dim", values: colorValues }),
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent-glow", label: "Glow", values: colorValues })
|
|
1048
1283
|
] }),
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
1050
|
-
/* @__PURE__ */ (0,
|
|
1051
|
-
/* @__PURE__ */ (0,
|
|
1052
|
-
/* @__PURE__ */ (0,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1054
|
-
/* @__PURE__ */ (0,
|
|
1284
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Backgrounds" }),
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1286
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-base", label: "Base", values: colorValues }),
|
|
1287
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-surface", label: "Surface", values: colorValues }),
|
|
1288
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-raised", label: "Raised", values: colorValues }),
|
|
1289
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-overlay", label: "Overlay", values: colorValues })
|
|
1055
1290
|
] }),
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1057
|
-
/* @__PURE__ */ (0,
|
|
1058
|
-
/* @__PURE__ */ (0,
|
|
1059
|
-
/* @__PURE__ */ (0,
|
|
1060
|
-
/* @__PURE__ */ (0,
|
|
1291
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Borders" }),
|
|
1292
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1293
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--border-subtle", label: "Subtle", values: colorValues }),
|
|
1294
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--border-soft", label: "Soft", values: colorValues }),
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--border-mid", label: "Mid", values: colorValues })
|
|
1061
1296
|
] }),
|
|
1062
|
-
/* @__PURE__ */ (0,
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1064
|
-
/* @__PURE__ */ (0,
|
|
1065
|
-
/* @__PURE__ */ (0,
|
|
1066
|
-
/* @__PURE__ */ (0,
|
|
1067
|
-
/* @__PURE__ */ (0,
|
|
1297
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Text" }),
|
|
1298
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1299
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-primary", label: "Primary", values: colorValues }),
|
|
1300
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-secondary", label: "Secondary", values: colorValues }),
|
|
1301
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-muted", label: "Muted", values: colorValues }),
|
|
1302
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-disabled", label: "Disabled", values: colorValues })
|
|
1068
1303
|
] }),
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1072
|
-
/* @__PURE__ */ (0,
|
|
1073
|
-
/* @__PURE__ */ (0,
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Semantic" }),
|
|
1305
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--success", label: "Success", values: colorValues }),
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--warning", label: "Warning", values: colorValues }),
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--error", label: "Error", values: colorValues }),
|
|
1309
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--info", label: "Info", values: colorValues })
|
|
1075
1310
|
] })
|
|
1076
1311
|
] }),
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1078
|
-
/* @__PURE__ */ (0,
|
|
1079
|
-
/* @__PURE__ */ (0,
|
|
1080
|
-
/* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1312
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(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: [
|
|
1313
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Families" }),
|
|
1314
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", marginBottom: "var(--sp-8)" }, children: FONT_FAMILIES.map(({ token, cssFamily, weight, sample }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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: [
|
|
1315
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontFamily: cssFamily, fontWeight: weight, fontSize: "var(--brand-text-lg)", color: "var(--text-primary)" }, children: sample }),
|
|
1316
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }, children: token })
|
|
1082
1317
|
] }, token)) }),
|
|
1083
|
-
/* @__PURE__ */ (0,
|
|
1084
|
-
/* @__PURE__ */ (0,
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1086
|
-
/* @__PURE__ */ (0,
|
|
1087
|
-
/* @__PURE__ */ (0,
|
|
1088
|
-
/* @__PURE__ */ (0,
|
|
1318
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Scale" }),
|
|
1319
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: TYPE_SCALE.map(({ token, label, role, weight, family }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--sp-6)", padding: "var(--sp-5) 0", borderBottom: "1px solid var(--border-subtle)" }, children: [
|
|
1320
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
|
|
1321
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }, children: token }),
|
|
1322
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: label }),
|
|
1323
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: role })
|
|
1089
1324
|
] }),
|
|
1090
|
-
/* @__PURE__ */ (0,
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: fontFamilyVar(family), fontSize: `var(${token})`, fontWeight: weight, color: "var(--text-primary)", lineHeight: 1.2 }, children: TYPE_SPECIMENS[token] })
|
|
1091
1326
|
] }, token)) })
|
|
1092
1327
|
] }),
|
|
1093
|
-
/* @__PURE__ */ (0,
|
|
1094
|
-
/* @__PURE__ */ (0,
|
|
1095
|
-
/* @__PURE__ */ (0,
|
|
1096
|
-
/* @__PURE__ */ (0,
|
|
1097
|
-
/* @__PURE__ */ (0,
|
|
1328
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Section, { label: "04 \u2014 Spacing", title: "Spacing Scale", description: "8px base grid. All values are multiples of 4px for sub-grid alignment.", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: SPACING.map(({ token, rem, px }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-4)" }, children: [
|
|
1329
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 70 }, children: token }),
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1, height: 24, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 8, width: `var(${token})`, background: "var(--accent)", borderRadius: 2, opacity: 0.7 } }) }),
|
|
1331
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 11, color: "var(--text-secondary)", minWidth: 50 }, children: rem }),
|
|
1332
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 40 }, children: px })
|
|
1098
1333
|
] }, token)) }) }),
|
|
1099
|
-
/* @__PURE__ */ (0,
|
|
1100
|
-
/* @__PURE__ */ (0,
|
|
1101
|
-
/* @__PURE__ */ (0,
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
/* @__PURE__ */ (0,
|
|
1334
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Section, { label: "05 \u2014 Shape", title: "Border Radius", description: "Consistent corner radii for a cohesive, modern feel across all components.", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "var(--sp-4)" }, children: RADII.map(({ token, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
1335
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: 64, height: 64, background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: `var(${token})` } }),
|
|
1336
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { textAlign: "center" }, children: [
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)" }, children: label }),
|
|
1338
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: value })
|
|
1104
1339
|
] })
|
|
1105
1340
|
] }, token)) }) }),
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
/* @__PURE__ */ (0,
|
|
1108
|
-
/* @__PURE__ */ (0,
|
|
1109
|
-
/* @__PURE__ */ (0,
|
|
1341
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Section, { label: "06 \u2014 Elevation", title: "Shadows", description: "Four shadow levels including an accent glow.", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-6)" }, children: SHADOWS.map(({ token, label, desc }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "var(--sp-8)", background: "var(--bg-surface)", borderRadius: "var(--brand-radius-lg)", boxShadow: `var(${token})` }, children: [
|
|
1342
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-1)" }, children: token }),
|
|
1343
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-secondary)", marginBottom: "var(--sp-1)" }, children: label }),
|
|
1344
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-muted)" }, children: desc })
|
|
1110
1345
|
] }, token)) }) }),
|
|
1111
|
-
/* @__PURE__ */ (0,
|
|
1112
|
-
/* @__PURE__ */ (0,
|
|
1113
|
-
/* @__PURE__ */ (0,
|
|
1114
|
-
/* @__PURE__ */ (0,
|
|
1115
|
-
/* @__PURE__ */ (0,
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1117
|
-
/* @__PURE__ */ (0,
|
|
1118
|
-
/* @__PURE__ */ (0,
|
|
1346
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Section, { label: "07 \u2014 Components", title: "UI Components", description: "Core interactive elements built from the token system above.", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComponentsSection, {}) }),
|
|
1347
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Section, { label: "08 \u2014 Motion", title: "Animation Tokens", description: "Subtle, purposeful motion. Never decorative \u2014 always communicates state or hierarchy.", children: [
|
|
1348
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Easing" }),
|
|
1349
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
|
|
1350
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1351
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)" }, children: label }),
|
|
1352
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: value }),
|
|
1353
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1119
1354
|
] }, token)) }),
|
|
1120
|
-
/* @__PURE__ */ (0,
|
|
1121
|
-
/* @__PURE__ */ (0,
|
|
1122
|
-
/* @__PURE__ */ (0,
|
|
1123
|
-
/* @__PURE__ */ (0,
|
|
1124
|
-
/* @__PURE__ */ (0,
|
|
1125
|
-
/* @__PURE__ */ (0,
|
|
1355
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Duration" }),
|
|
1356
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: DURATIONS.map(({ token, label, value, use }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
|
|
1357
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1358
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-xl)", fontWeight: 700, color: "var(--text-primary)" }, children: value }),
|
|
1359
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: label }),
|
|
1360
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1126
1361
|
] }, token)) })
|
|
1127
1362
|
] }),
|
|
1128
|
-
/* @__PURE__ */ (0,
|
|
1363
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Footer, {})
|
|
1129
1364
|
] }) });
|
|
1130
1365
|
}
|
|
1131
1366
|
function logoCardStyle(bg) {
|
|
@@ -1171,6 +1406,7 @@ var favicon_default = 'data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" x
|
|
|
1171
1406
|
0 && (module.exports = {
|
|
1172
1407
|
AgMark,
|
|
1173
1408
|
AgWordmark,
|
|
1409
|
+
BlogPost,
|
|
1174
1410
|
DocsLayout,
|
|
1175
1411
|
Footer,
|
|
1176
1412
|
ThemePage,
|