@adarsh_goswami/design 0.1.13-dev → 0.1.15-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +500 -294
- package/dist/index.css +68 -0
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +441 -236
- package/package.json +1 -1
package/dist/index.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,219 @@ __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
|
+
var markdownComponents = {
|
|
55
|
+
h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
import_themes.Heading,
|
|
57
|
+
{
|
|
58
|
+
as: "h1",
|
|
59
|
+
size: "7",
|
|
60
|
+
mb: "4",
|
|
61
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
62
|
+
children
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_themes.Heading,
|
|
67
|
+
{
|
|
68
|
+
as: "h2",
|
|
69
|
+
size: "5",
|
|
70
|
+
mb: "3",
|
|
71
|
+
mt: "6",
|
|
72
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
|
|
73
|
+
children
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
import_themes.Heading,
|
|
78
|
+
{
|
|
79
|
+
as: "h3",
|
|
80
|
+
size: "4",
|
|
81
|
+
mb: "2",
|
|
82
|
+
mt: "5",
|
|
83
|
+
style: { fontFamily: "var(--brand-font-display)", color: "var(--text-secondary)" },
|
|
84
|
+
children
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
|
+
import_themes.Text,
|
|
89
|
+
{
|
|
90
|
+
as: "p",
|
|
91
|
+
size: "3",
|
|
92
|
+
mb: "4",
|
|
93
|
+
style: {
|
|
94
|
+
fontFamily: "var(--brand-font-body)",
|
|
95
|
+
color: "var(--text-secondary)",
|
|
96
|
+
lineHeight: "var(--brand-leading-relaxed)",
|
|
97
|
+
display: "block"
|
|
98
|
+
},
|
|
99
|
+
children
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: href ?? "#", style: { color: "var(--accent)", textDecoration: "underline" }, children }),
|
|
103
|
+
code: ({ className, children }) => {
|
|
104
|
+
const isBlock = className?.startsWith("language-");
|
|
105
|
+
if (isBlock) {
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
import_themes.Box,
|
|
108
|
+
{
|
|
109
|
+
mb: "4",
|
|
110
|
+
style: {
|
|
111
|
+
borderRadius: "var(--brand-radius-lg)",
|
|
112
|
+
border: "1px solid var(--border-soft)",
|
|
113
|
+
backgroundColor: "var(--bg-raised)",
|
|
114
|
+
overflowX: "auto"
|
|
115
|
+
},
|
|
116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
"code",
|
|
118
|
+
{
|
|
119
|
+
className: className ?? "",
|
|
120
|
+
style: {
|
|
121
|
+
display: "block",
|
|
122
|
+
padding: "var(--sp-4)",
|
|
123
|
+
fontSize: "var(--brand-text-sm)",
|
|
124
|
+
fontFamily: "var(--brand-font-mono)",
|
|
125
|
+
color: "var(--text-primary)"
|
|
126
|
+
},
|
|
127
|
+
children
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
|
+
"code",
|
|
135
|
+
{
|
|
136
|
+
style: {
|
|
137
|
+
backgroundColor: "var(--bg-raised)",
|
|
138
|
+
color: "var(--accent-bright)",
|
|
139
|
+
borderRadius: "var(--brand-radius-sm)",
|
|
140
|
+
padding: "2px 6px",
|
|
141
|
+
fontSize: "var(--brand-text-sm)",
|
|
142
|
+
fontFamily: "var(--brand-font-mono)"
|
|
143
|
+
},
|
|
144
|
+
children
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
},
|
|
148
|
+
ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
149
|
+
"ul",
|
|
150
|
+
{
|
|
151
|
+
style: {
|
|
152
|
+
marginBottom: "var(--sp-4)",
|
|
153
|
+
paddingLeft: "var(--sp-4)",
|
|
154
|
+
listStyleType: "disc",
|
|
155
|
+
color: "var(--text-secondary)",
|
|
156
|
+
fontFamily: "var(--brand-font-body)"
|
|
157
|
+
},
|
|
158
|
+
children
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
162
|
+
"ol",
|
|
163
|
+
{
|
|
164
|
+
style: {
|
|
165
|
+
marginBottom: "var(--sp-4)",
|
|
166
|
+
paddingLeft: "var(--sp-4)",
|
|
167
|
+
listStyleType: "decimal",
|
|
168
|
+
color: "var(--text-secondary)",
|
|
169
|
+
fontFamily: "var(--brand-font-body)"
|
|
170
|
+
},
|
|
171
|
+
children
|
|
172
|
+
}
|
|
173
|
+
),
|
|
174
|
+
li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
175
|
+
import_themes.Text,
|
|
176
|
+
{
|
|
177
|
+
as: "p",
|
|
178
|
+
size: "3",
|
|
179
|
+
mb: "1",
|
|
180
|
+
style: {
|
|
181
|
+
fontFamily: "var(--brand-font-body)",
|
|
182
|
+
color: "var(--text-secondary)",
|
|
183
|
+
display: "list-item"
|
|
184
|
+
},
|
|
185
|
+
children
|
|
186
|
+
}
|
|
187
|
+
),
|
|
188
|
+
blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
189
|
+
import_themes.Box,
|
|
190
|
+
{
|
|
191
|
+
mb: "4",
|
|
192
|
+
pl: "4",
|
|
193
|
+
py: "2",
|
|
194
|
+
style: {
|
|
195
|
+
borderLeft: "2px solid var(--accent)",
|
|
196
|
+
backgroundColor: "var(--accent-subtle)",
|
|
197
|
+
borderRadius: "0 var(--brand-radius-md) var(--brand-radius-md) 0"
|
|
198
|
+
},
|
|
199
|
+
children
|
|
200
|
+
}
|
|
201
|
+
),
|
|
202
|
+
table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
203
|
+
"table",
|
|
204
|
+
{
|
|
205
|
+
style: {
|
|
206
|
+
width: "100%",
|
|
207
|
+
borderCollapse: "collapse",
|
|
208
|
+
fontSize: "var(--brand-text-sm)",
|
|
209
|
+
fontFamily: "var(--brand-font-body)"
|
|
210
|
+
},
|
|
211
|
+
children
|
|
212
|
+
}
|
|
213
|
+
) }),
|
|
214
|
+
th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
215
|
+
"th",
|
|
216
|
+
{
|
|
217
|
+
style: {
|
|
218
|
+
textAlign: "left",
|
|
219
|
+
padding: "8px 12px",
|
|
220
|
+
borderBottom: "1px solid var(--border-mid)",
|
|
221
|
+
color: "var(--text-primary)",
|
|
222
|
+
fontWeight: 500
|
|
223
|
+
},
|
|
224
|
+
children
|
|
225
|
+
}
|
|
226
|
+
),
|
|
227
|
+
td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
228
|
+
"td",
|
|
229
|
+
{
|
|
230
|
+
style: {
|
|
231
|
+
padding: "8px 12px",
|
|
232
|
+
borderBottom: "1px solid var(--border-subtle)",
|
|
233
|
+
color: "var(--text-secondary)"
|
|
234
|
+
},
|
|
235
|
+
children
|
|
236
|
+
}
|
|
237
|
+
),
|
|
238
|
+
hr: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { my: "6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Separator, { size: "4" }) })
|
|
239
|
+
};
|
|
240
|
+
function BlogPost({ content }) {
|
|
241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("article", { className: "blog-post", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
242
|
+
import_react_markdown.default,
|
|
243
|
+
{
|
|
244
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
245
|
+
rehypePlugins: [import_rehype_highlight.default],
|
|
246
|
+
components: markdownComponents,
|
|
247
|
+
children: content
|
|
248
|
+
}
|
|
249
|
+
) });
|
|
250
|
+
}
|
|
251
|
+
|
|
47
252
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
48
|
-
var
|
|
253
|
+
var import_themes4 = require("@radix-ui/themes");
|
|
49
254
|
|
|
50
255
|
// src/components/DocsLayout/NavSidebar.tsx
|
|
51
|
-
var
|
|
52
|
-
var
|
|
256
|
+
var import_themes2 = require("@radix-ui/themes");
|
|
257
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
53
258
|
function NavStatusBadge({ status }) {
|
|
54
259
|
if (status === "final") return null;
|
|
55
|
-
return /* @__PURE__ */ (0,
|
|
260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Badge, { size: "1", variant: "soft", color: status === "draft" ? "yellow" : "gray", children: status });
|
|
56
261
|
}
|
|
57
262
|
function NavLeaf({
|
|
58
263
|
id,
|
|
@@ -64,14 +269,14 @@ function NavLeaf({
|
|
|
64
269
|
}) {
|
|
65
270
|
const isActive = slug === activeSlug;
|
|
66
271
|
const isDeprecated = status === "deprecated";
|
|
67
|
-
return /* @__PURE__ */ (0,
|
|
272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Box, { mb: "1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
68
273
|
"button",
|
|
69
274
|
{
|
|
70
275
|
type: "button",
|
|
71
276
|
onClick: () => onSlugChange(slug),
|
|
72
277
|
style: { width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0 },
|
|
73
|
-
children: /* @__PURE__ */ (0,
|
|
74
|
-
|
|
278
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
279
|
+
import_themes2.Flex,
|
|
75
280
|
{
|
|
76
281
|
align: "center",
|
|
77
282
|
justify: "between",
|
|
@@ -84,8 +289,8 @@ function NavLeaf({
|
|
|
84
289
|
].join(" "),
|
|
85
290
|
style: { minHeight: "30px" },
|
|
86
291
|
children: [
|
|
87
|
-
/* @__PURE__ */ (0,
|
|
88
|
-
|
|
292
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
293
|
+
import_themes2.Text,
|
|
89
294
|
{
|
|
90
295
|
as: "span",
|
|
91
296
|
size: "2",
|
|
@@ -97,7 +302,7 @@ function NavLeaf({
|
|
|
97
302
|
children: label
|
|
98
303
|
}
|
|
99
304
|
),
|
|
100
|
-
status && /* @__PURE__ */ (0,
|
|
305
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NavStatusBadge, { status })
|
|
101
306
|
]
|
|
102
307
|
}
|
|
103
308
|
)
|
|
@@ -110,7 +315,7 @@ function NavItemRow({
|
|
|
110
315
|
onSlugChange
|
|
111
316
|
}) {
|
|
112
317
|
if (item.slug) {
|
|
113
|
-
return /* @__PURE__ */ (0,
|
|
318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
114
319
|
NavLeaf,
|
|
115
320
|
{
|
|
116
321
|
id: item.id,
|
|
@@ -122,10 +327,10 @@ function NavItemRow({
|
|
|
122
327
|
}
|
|
123
328
|
);
|
|
124
329
|
}
|
|
125
|
-
return /* @__PURE__ */ (0,
|
|
126
|
-
/* @__PURE__ */ (0,
|
|
127
|
-
/* @__PURE__ */ (0,
|
|
128
|
-
|
|
330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Box, { mb: "1", children: [
|
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Flex, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
|
|
332
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
333
|
+
import_themes2.Text,
|
|
129
334
|
{
|
|
130
335
|
as: "p",
|
|
131
336
|
size: "2",
|
|
@@ -138,9 +343,9 @@ function NavItemRow({
|
|
|
138
343
|
children: item.label
|
|
139
344
|
}
|
|
140
345
|
),
|
|
141
|
-
item.status && /* @__PURE__ */ (0,
|
|
346
|
+
item.status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NavStatusBadge, { status: item.status })
|
|
142
347
|
] }),
|
|
143
|
-
item.children && item.children.length > 0 && /* @__PURE__ */ (0,
|
|
348
|
+
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
349
|
NavLeaf,
|
|
145
350
|
{
|
|
146
351
|
id: child.id,
|
|
@@ -155,8 +360,8 @@ function NavItemRow({
|
|
|
155
360
|
] });
|
|
156
361
|
}
|
|
157
362
|
function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
158
|
-
return /* @__PURE__ */ (0,
|
|
159
|
-
|
|
363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
364
|
+
import_themes2.Box,
|
|
160
365
|
{
|
|
161
366
|
style: {
|
|
162
367
|
width: "256px",
|
|
@@ -168,16 +373,16 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
168
373
|
flexDirection: "column"
|
|
169
374
|
},
|
|
170
375
|
children: [
|
|
171
|
-
/* @__PURE__ */ (0,
|
|
172
|
-
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
377
|
+
import_themes2.Box,
|
|
173
378
|
{
|
|
174
379
|
px: "4",
|
|
175
380
|
py: "3",
|
|
176
381
|
style: { borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 },
|
|
177
|
-
children: /* @__PURE__ */ (0,
|
|
178
|
-
meta.logoUrl && /* @__PURE__ */ (0,
|
|
179
|
-
/* @__PURE__ */ (0,
|
|
180
|
-
|
|
382
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_themes2.Flex, { align: "center", gap: "2", children: [
|
|
383
|
+
meta.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: meta.logoUrl, alt: meta.title, style: { height: "20px", width: "auto" } }),
|
|
384
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
385
|
+
import_themes2.Heading,
|
|
181
386
|
{
|
|
182
387
|
as: "h2",
|
|
183
388
|
size: "3",
|
|
@@ -185,13 +390,13 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
185
390
|
children: meta.title
|
|
186
391
|
}
|
|
187
392
|
),
|
|
188
|
-
meta.version && /* @__PURE__ */ (0,
|
|
393
|
+
meta.version && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Badge, { size: "1", variant: "soft", color: "violet", children: meta.version })
|
|
189
394
|
] })
|
|
190
395
|
}
|
|
191
396
|
),
|
|
192
|
-
/* @__PURE__ */ (0,
|
|
193
|
-
/* @__PURE__ */ (0,
|
|
194
|
-
|
|
397
|
+
/* @__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: [
|
|
398
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
399
|
+
import_themes2.Text,
|
|
195
400
|
{
|
|
196
401
|
as: "p",
|
|
197
402
|
size: "1",
|
|
@@ -207,8 +412,8 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
207
412
|
children: section.label
|
|
208
413
|
}
|
|
209
414
|
),
|
|
210
|
-
/* @__PURE__ */ (0,
|
|
211
|
-
section.items.map((item) => /* @__PURE__ */ (0,
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Separator, { size: "4", mb: "2" }),
|
|
416
|
+
section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
212
417
|
NavItemRow,
|
|
213
418
|
{
|
|
214
419
|
item,
|
|
@@ -224,14 +429,14 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
|
|
|
224
429
|
}
|
|
225
430
|
|
|
226
431
|
// src/components/DocsLayout/MarkdownContent.tsx
|
|
227
|
-
var
|
|
228
|
-
var
|
|
229
|
-
var
|
|
230
|
-
var
|
|
231
|
-
var
|
|
232
|
-
var
|
|
233
|
-
h1: ({ children }) => /* @__PURE__ */ (0,
|
|
234
|
-
|
|
432
|
+
var import_react_markdown2 = __toESM(require("react-markdown"), 1);
|
|
433
|
+
var import_remark_gfm2 = __toESM(require("remark-gfm"), 1);
|
|
434
|
+
var import_rehype_highlight2 = __toESM(require("rehype-highlight"), 1);
|
|
435
|
+
var import_themes3 = require("@radix-ui/themes");
|
|
436
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
437
|
+
var markdownComponents2 = {
|
|
438
|
+
h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
439
|
+
import_themes3.Heading,
|
|
235
440
|
{
|
|
236
441
|
as: "h1",
|
|
237
442
|
size: "7",
|
|
@@ -240,8 +445,8 @@ var markdownComponents = {
|
|
|
240
445
|
children
|
|
241
446
|
}
|
|
242
447
|
),
|
|
243
|
-
h2: ({ children }) => /* @__PURE__ */ (0,
|
|
244
|
-
|
|
448
|
+
h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
449
|
+
import_themes3.Heading,
|
|
245
450
|
{
|
|
246
451
|
as: "h2",
|
|
247
452
|
size: "5",
|
|
@@ -251,8 +456,8 @@ var markdownComponents = {
|
|
|
251
456
|
children
|
|
252
457
|
}
|
|
253
458
|
),
|
|
254
|
-
h3: ({ children }) => /* @__PURE__ */ (0,
|
|
255
|
-
|
|
459
|
+
h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
460
|
+
import_themes3.Heading,
|
|
256
461
|
{
|
|
257
462
|
as: "h3",
|
|
258
463
|
size: "4",
|
|
@@ -262,8 +467,8 @@ var markdownComponents = {
|
|
|
262
467
|
children
|
|
263
468
|
}
|
|
264
469
|
),
|
|
265
|
-
p: ({ children }) => /* @__PURE__ */ (0,
|
|
266
|
-
|
|
470
|
+
p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
471
|
+
import_themes3.Text,
|
|
267
472
|
{
|
|
268
473
|
as: "p",
|
|
269
474
|
size: "3",
|
|
@@ -277,7 +482,7 @@ var markdownComponents = {
|
|
|
277
482
|
children
|
|
278
483
|
}
|
|
279
484
|
),
|
|
280
|
-
a: ({ href, children }) => /* @__PURE__ */ (0,
|
|
485
|
+
a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
281
486
|
"a",
|
|
282
487
|
{
|
|
283
488
|
href: href ?? "#",
|
|
@@ -288,8 +493,8 @@ var markdownComponents = {
|
|
|
288
493
|
code: ({ className, children }) => {
|
|
289
494
|
const isBlock = className?.startsWith("language-");
|
|
290
495
|
if (isBlock) {
|
|
291
|
-
return /* @__PURE__ */ (0,
|
|
292
|
-
|
|
496
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
497
|
+
import_themes3.Box,
|
|
293
498
|
{
|
|
294
499
|
mb: "4",
|
|
295
500
|
style: {
|
|
@@ -298,7 +503,7 @@ var markdownComponents = {
|
|
|
298
503
|
backgroundColor: "var(--bg-raised)",
|
|
299
504
|
overflowX: "auto"
|
|
300
505
|
},
|
|
301
|
-
children: /* @__PURE__ */ (0,
|
|
506
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
302
507
|
"code",
|
|
303
508
|
{
|
|
304
509
|
className: className ?? "",
|
|
@@ -315,7 +520,7 @@ var markdownComponents = {
|
|
|
315
520
|
}
|
|
316
521
|
);
|
|
317
522
|
}
|
|
318
|
-
return /* @__PURE__ */ (0,
|
|
523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
319
524
|
"code",
|
|
320
525
|
{
|
|
321
526
|
style: {
|
|
@@ -330,7 +535,7 @@ var markdownComponents = {
|
|
|
330
535
|
}
|
|
331
536
|
);
|
|
332
537
|
},
|
|
333
|
-
ul: ({ children }) => /* @__PURE__ */ (0,
|
|
538
|
+
ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
334
539
|
"ul",
|
|
335
540
|
{
|
|
336
541
|
style: {
|
|
@@ -343,7 +548,7 @@ var markdownComponents = {
|
|
|
343
548
|
children
|
|
344
549
|
}
|
|
345
550
|
),
|
|
346
|
-
ol: ({ children }) => /* @__PURE__ */ (0,
|
|
551
|
+
ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
347
552
|
"ol",
|
|
348
553
|
{
|
|
349
554
|
style: {
|
|
@@ -356,8 +561,8 @@ var markdownComponents = {
|
|
|
356
561
|
children
|
|
357
562
|
}
|
|
358
563
|
),
|
|
359
|
-
li: ({ children }) => /* @__PURE__ */ (0,
|
|
360
|
-
|
|
564
|
+
li: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
565
|
+
import_themes3.Text,
|
|
361
566
|
{
|
|
362
567
|
as: "p",
|
|
363
568
|
size: "3",
|
|
@@ -370,8 +575,8 @@ var markdownComponents = {
|
|
|
370
575
|
children
|
|
371
576
|
}
|
|
372
577
|
),
|
|
373
|
-
blockquote: ({ children }) => /* @__PURE__ */ (0,
|
|
374
|
-
|
|
578
|
+
blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
579
|
+
import_themes3.Box,
|
|
375
580
|
{
|
|
376
581
|
mb: "4",
|
|
377
582
|
pl: "4",
|
|
@@ -384,7 +589,7 @@ var markdownComponents = {
|
|
|
384
589
|
children
|
|
385
590
|
}
|
|
386
591
|
),
|
|
387
|
-
table: ({ children }) => /* @__PURE__ */ (0,
|
|
592
|
+
table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Box, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
388
593
|
"table",
|
|
389
594
|
{
|
|
390
595
|
style: {
|
|
@@ -396,7 +601,7 @@ var markdownComponents = {
|
|
|
396
601
|
children
|
|
397
602
|
}
|
|
398
603
|
) }),
|
|
399
|
-
th: ({ children }) => /* @__PURE__ */ (0,
|
|
604
|
+
th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
400
605
|
"th",
|
|
401
606
|
{
|
|
402
607
|
style: {
|
|
@@ -409,7 +614,7 @@ var markdownComponents = {
|
|
|
409
614
|
children
|
|
410
615
|
}
|
|
411
616
|
),
|
|
412
|
-
td: ({ children }) => /* @__PURE__ */ (0,
|
|
617
|
+
td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
413
618
|
"td",
|
|
414
619
|
{
|
|
415
620
|
style: {
|
|
@@ -420,22 +625,22 @@ var markdownComponents = {
|
|
|
420
625
|
children
|
|
421
626
|
}
|
|
422
627
|
),
|
|
423
|
-
hr: () => /* @__PURE__ */ (0,
|
|
628
|
+
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
629
|
};
|
|
425
630
|
function MarkdownContent({ content }) {
|
|
426
|
-
return /* @__PURE__ */ (0,
|
|
427
|
-
|
|
631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
632
|
+
import_react_markdown2.default,
|
|
428
633
|
{
|
|
429
|
-
remarkPlugins: [
|
|
430
|
-
rehypePlugins: [
|
|
431
|
-
components:
|
|
634
|
+
remarkPlugins: [import_remark_gfm2.default],
|
|
635
|
+
rehypePlugins: [import_rehype_highlight2.default],
|
|
636
|
+
components: markdownComponents2,
|
|
432
637
|
children: content
|
|
433
638
|
}
|
|
434
639
|
);
|
|
435
640
|
}
|
|
436
641
|
|
|
437
642
|
// src/components/DocsLayout/DocsLayout.tsx
|
|
438
|
-
var
|
|
643
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
439
644
|
var PAGE_TYPE_COLORS = {
|
|
440
645
|
prd: "violet",
|
|
441
646
|
adr: "blue",
|
|
@@ -443,13 +648,13 @@ var PAGE_TYPE_COLORS = {
|
|
|
443
648
|
reference: "gray"
|
|
444
649
|
};
|
|
445
650
|
function PageTypeBadge({ type }) {
|
|
446
|
-
return /* @__PURE__ */ (0,
|
|
651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Badge, { size: "1", variant: "soft", color: PAGE_TYPE_COLORS[type], children: type.toUpperCase() });
|
|
447
652
|
}
|
|
448
653
|
function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
449
654
|
const { meta, navigation, pages } = data;
|
|
450
655
|
const page = pages[activeSlug];
|
|
451
|
-
return /* @__PURE__ */ (0,
|
|
452
|
-
/* @__PURE__ */ (0,
|
|
656
|
+
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: [
|
|
657
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
453
658
|
NavSidebar,
|
|
454
659
|
{
|
|
455
660
|
meta,
|
|
@@ -458,11 +663,11 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
458
663
|
onSlugChange
|
|
459
664
|
}
|
|
460
665
|
),
|
|
461
|
-
/* @__PURE__ */ (0,
|
|
462
|
-
/* @__PURE__ */ (0,
|
|
463
|
-
page.type && /* @__PURE__ */ (0,
|
|
464
|
-
page.lastUpdated && /* @__PURE__ */ (0,
|
|
465
|
-
|
|
666
|
+
/* @__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: [
|
|
667
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Flex, { align: "center", gap: "3", mb: "3", children: [
|
|
668
|
+
page.type && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PageTypeBadge, { type: page.type }),
|
|
669
|
+
page.lastUpdated && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
670
|
+
import_themes4.Text,
|
|
466
671
|
{
|
|
467
672
|
size: "1",
|
|
468
673
|
style: { color: "var(--text-muted)", fontFamily: "var(--brand-font-body)" },
|
|
@@ -473,8 +678,8 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
473
678
|
}
|
|
474
679
|
)
|
|
475
680
|
] }),
|
|
476
|
-
/* @__PURE__ */ (0,
|
|
477
|
-
|
|
681
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
682
|
+
import_themes4.Heading,
|
|
478
683
|
{
|
|
479
684
|
as: "h1",
|
|
480
685
|
size: "8",
|
|
@@ -486,51 +691,51 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
|
|
|
486
691
|
children: page.title
|
|
487
692
|
}
|
|
488
693
|
),
|
|
489
|
-
/* @__PURE__ */ (0,
|
|
490
|
-
/* @__PURE__ */ (0,
|
|
694
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Separator, { size: "4", mb: "6" }),
|
|
695
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MarkdownContent, { content: page.content })
|
|
491
696
|
] }) }) }) })
|
|
492
697
|
] }) });
|
|
493
698
|
}
|
|
494
699
|
|
|
495
700
|
// src/components/Logo/Logo.tsx
|
|
496
|
-
var
|
|
701
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
497
702
|
function AgMark({ size = 64, variant = "dark" }) {
|
|
498
703
|
const aPrimary = variant === "light" ? "#4A3FCC" : variant === "glow" ? "#9B8FFB" : "#7C6EFA";
|
|
499
704
|
const gPrimary = variant === "light" ? "#0A0A0B" : "#F0EEF8";
|
|
500
705
|
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,
|
|
706
|
+
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: [
|
|
707
|
+
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: [
|
|
708
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "0%", stopColor: "#1A1630" }),
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "100%", stopColor: "#0D0C1A" })
|
|
505
710
|
] }) }),
|
|
506
|
-
/* @__PURE__ */ (0,
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
508
|
-
/* @__PURE__ */ (0,
|
|
509
|
-
/* @__PURE__ */ (0,
|
|
510
|
-
/* @__PURE__ */ (0,
|
|
711
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "64", height: "64", rx: "14", fill: bgFill }),
|
|
712
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 46 L24 20 L34 46", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "37", x2: "30", y2: "37", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round" }),
|
|
714
|
+
/* @__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" }),
|
|
715
|
+
/* @__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
716
|
] });
|
|
512
717
|
}
|
|
513
718
|
function AgWordmark() {
|
|
514
|
-
return /* @__PURE__ */ (0,
|
|
515
|
-
/* @__PURE__ */ (0,
|
|
516
|
-
/* @__PURE__ */ (0,
|
|
517
|
-
/* @__PURE__ */ (0,
|
|
518
|
-
/* @__PURE__ */ (0,
|
|
519
|
-
/* @__PURE__ */ (0,
|
|
520
|
-
/* @__PURE__ */ (0,
|
|
719
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
|
|
721
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "36", height: "36", rx: "8", fill: "#18181C" }),
|
|
722
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 26 L13 10 L20 26", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
723
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", y1: "20.5", x2: "17", y2: "20.5", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
724
|
+
/* @__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" }),
|
|
725
|
+
/* @__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
726
|
] }),
|
|
522
|
-
/* @__PURE__ */ (0,
|
|
727
|
+
/* @__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
728
|
"Adarsh",
|
|
524
|
-
/* @__PURE__ */ (0,
|
|
729
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--accent)" }, children: "." })
|
|
525
730
|
] })
|
|
526
731
|
] });
|
|
527
732
|
}
|
|
528
733
|
|
|
529
734
|
// src/components/Footer/Footer.tsx
|
|
530
|
-
var
|
|
735
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
531
736
|
function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
532
737
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
533
|
-
return /* @__PURE__ */ (0,
|
|
738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
|
|
534
739
|
paddingTop: "var(--sp-16)",
|
|
535
740
|
paddingBottom: "var(--sp-8)",
|
|
536
741
|
borderTop: "1px solid var(--border-subtle)",
|
|
@@ -540,13 +745,13 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
|
540
745
|
flexWrap: "wrap",
|
|
541
746
|
gap: "var(--sp-4)"
|
|
542
747
|
}, children: [
|
|
543
|
-
/* @__PURE__ */ (0,
|
|
544
|
-
/* @__PURE__ */ (0,
|
|
545
|
-
/* @__PURE__ */ (0,
|
|
546
|
-
/* @__PURE__ */ (0,
|
|
547
|
-
/* @__PURE__ */ (0,
|
|
748
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AgWordmark, {}),
|
|
749
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
|
|
750
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
|
|
751
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6", cy: "6", r: "5.5", stroke: "var(--border-soft)" }),
|
|
752
|
+
/* @__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
753
|
] }),
|
|
549
|
-
/* @__PURE__ */ (0,
|
|
754
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
|
|
550
755
|
year,
|
|
551
756
|
" Adarsh Goswami. All rights reserved."
|
|
552
757
|
] })
|
|
@@ -556,7 +761,7 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
|
|
|
556
761
|
|
|
557
762
|
// src/components/Theme/ThemeProvider.tsx
|
|
558
763
|
var import_react2 = require("react");
|
|
559
|
-
var
|
|
764
|
+
var import_themes5 = require("@radix-ui/themes");
|
|
560
765
|
|
|
561
766
|
// src/components/Theme/ThemeContext.ts
|
|
562
767
|
var import_react = require("react");
|
|
@@ -570,7 +775,7 @@ function useTheme() {
|
|
|
570
775
|
}
|
|
571
776
|
|
|
572
777
|
// src/components/Theme/ThemeProvider.tsx
|
|
573
|
-
var
|
|
778
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
574
779
|
function ThemeProvider({
|
|
575
780
|
children,
|
|
576
781
|
defaultTheme = "dark"
|
|
@@ -586,16 +791,16 @@ function ThemeProvider({
|
|
|
586
791
|
const toggleTheme = (0, import_react2.useCallback)(() => {
|
|
587
792
|
setThemeState((prev) => prev === "dark" ? "light" : "dark");
|
|
588
793
|
}, []);
|
|
589
|
-
return /* @__PURE__ */ (0,
|
|
794
|
+
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
795
|
}
|
|
591
796
|
|
|
592
797
|
// src/components/Theme/ThemeToggle.tsx
|
|
593
|
-
var
|
|
594
|
-
var
|
|
798
|
+
var import_themes6 = require("@radix-ui/themes");
|
|
799
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
595
800
|
function ThemeToggle({ "aria-label": ariaLabel = "Toggle theme" }) {
|
|
596
801
|
const { theme, toggleTheme } = useTheme();
|
|
597
|
-
return /* @__PURE__ */ (0,
|
|
598
|
-
|
|
802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
803
|
+
import_themes6.Switch,
|
|
599
804
|
{
|
|
600
805
|
size: "2",
|
|
601
806
|
className: "ag-theme-toggle",
|
|
@@ -668,7 +873,7 @@ var package_default = {
|
|
|
668
873
|
};
|
|
669
874
|
|
|
670
875
|
// src/components/ThemePage/ThemePage.tsx
|
|
671
|
-
var
|
|
876
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
672
877
|
function useTokenMap(tokens) {
|
|
673
878
|
const [map, setMap] = (0, import_react3.useState)({});
|
|
674
879
|
(0, import_react3.useEffect)(() => {
|
|
@@ -680,7 +885,7 @@ function useTokenMap(tokens) {
|
|
|
680
885
|
return map;
|
|
681
886
|
}
|
|
682
887
|
function SectionLabel({ children }) {
|
|
683
|
-
return /* @__PURE__ */ (0,
|
|
888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: {
|
|
684
889
|
fontFamily: "var(--brand-font-mono)",
|
|
685
890
|
fontSize: "var(--brand-text-xs)",
|
|
686
891
|
letterSpacing: "0.1em",
|
|
@@ -690,29 +895,29 @@ function SectionLabel({ children }) {
|
|
|
690
895
|
}, children });
|
|
691
896
|
}
|
|
692
897
|
function Section({ label, title, description, children, first }) {
|
|
693
|
-
return /* @__PURE__ */ (0,
|
|
898
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { style: {
|
|
694
899
|
marginBottom: "var(--sp-24)",
|
|
695
900
|
paddingTop: first ? 0 : "var(--sp-24)",
|
|
696
901
|
borderTop: first ? "none" : "1px solid var(--border-subtle)"
|
|
697
902
|
}, children: [
|
|
698
|
-
/* @__PURE__ */ (0,
|
|
699
|
-
/* @__PURE__ */ (0,
|
|
700
|
-
description && /* @__PURE__ */ (0,
|
|
903
|
+
/* @__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 }),
|
|
904
|
+
/* @__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 }),
|
|
905
|
+
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
906
|
children
|
|
702
907
|
] });
|
|
703
908
|
}
|
|
704
909
|
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,
|
|
910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 56, background: `var(${token})` } }),
|
|
912
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
|
|
913
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", fontWeight: 500, color: "var(--text-primary)", marginBottom: 2 }, children: label }),
|
|
914
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-muted)" }, children: token }),
|
|
915
|
+
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
916
|
] })
|
|
712
917
|
] });
|
|
713
918
|
}
|
|
714
919
|
function ColorGrid({ children }) {
|
|
715
|
-
return /* @__PURE__ */ (0,
|
|
920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "var(--sp-3)" }, children });
|
|
716
921
|
}
|
|
717
922
|
var COLOR_TOKENS = [
|
|
718
923
|
"--bg-base",
|
|
@@ -809,128 +1014,128 @@ function fontFamilyVar(family) {
|
|
|
809
1014
|
function ComponentsSection() {
|
|
810
1015
|
const [tooltipVisible, setTooltipVisible] = (0, import_react3.useState)(false);
|
|
811
1016
|
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,
|
|
1017
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
|
|
1018
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1019
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Buttons" }),
|
|
1020
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
|
|
1021
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("primary"), children: "Deploy service" }),
|
|
1022
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("secondary"), children: "View source" }),
|
|
1023
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("ghost"), children: "Cancel" }),
|
|
1024
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("danger"), children: "Delete" })
|
|
820
1025
|
] }),
|
|
821
|
-
/* @__PURE__ */ (0,
|
|
822
|
-
/* @__PURE__ */ (0,
|
|
823
|
-
/* @__PURE__ */ (0,
|
|
824
|
-
/* @__PURE__ */ (0,
|
|
1026
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
1027
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Small" }),
|
|
1028
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("primary"), children: "Default" }),
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...btnStyle("primary"), ...btnSize("lg") }, children: "Large" })
|
|
825
1030
|
] })
|
|
826
1031
|
] }),
|
|
827
|
-
/* @__PURE__ */ (0,
|
|
828
|
-
/* @__PURE__ */ (0,
|
|
829
|
-
/* @__PURE__ */ (0,
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Badges" }),
|
|
1034
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
|
|
830
1035
|
{ label: "Default", bg: "var(--bg-overlay)", color: "var(--text-secondary)", border: "var(--border-soft)" },
|
|
831
1036
|
{ label: "\u25CF Live", bg: "var(--accent-subtle)", color: "var(--accent-bright)", border: "var(--accent-border)" },
|
|
832
1037
|
{ label: "\u25CF Active", bg: "var(--success-bg)", color: "var(--success)", border: "var(--success-border)" },
|
|
833
1038
|
{ label: "\u25CF Degraded", bg: "var(--warning-bg)", color: "var(--warning)", border: "var(--warning-border)" },
|
|
834
1039
|
{ label: "\u25CF Offline", bg: "var(--error-bg)", color: "var(--error)", border: "var(--error-border)" }
|
|
835
|
-
].map((b) => /* @__PURE__ */ (0,
|
|
1040
|
+
].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
1041
|
] }),
|
|
837
|
-
/* @__PURE__ */ (0,
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Cards" }),
|
|
1044
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--sp-4)" }, children: [
|
|
840
1045
|
{ icon: "\u{1F510}", title: "Auth Service", body: "JWT-based auth with refresh tokens, OAuth2, and session management." },
|
|
841
1046
|
{ icon: "\u{1F4B3}", title: "Payments", body: "Stripe-powered billing with webhooks, subscriptions, and invoicing." },
|
|
842
1047
|
{ 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,
|
|
1048
|
+
].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: [
|
|
1049
|
+
/* @__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 }),
|
|
1050
|
+
/* @__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 }),
|
|
1051
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.6 }, children: card.body })
|
|
847
1052
|
] }, card.title)) })
|
|
848
1053
|
] }),
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
850
|
-
/* @__PURE__ */ (0,
|
|
851
|
-
/* @__PURE__ */ (0,
|
|
852
|
-
/* @__PURE__ */ (0,
|
|
853
|
-
/* @__PURE__ */ (0,
|
|
854
|
-
/* @__PURE__ */ (0,
|
|
1054
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1055
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Form Inputs" }),
|
|
1056
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
|
|
1057
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1058
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { style: labelStyle, children: "Project name" }),
|
|
1059
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { readOnly: true, style: inputStyle(), placeholder: "my-awesome-app", defaultValue: "" })
|
|
855
1060
|
] }),
|
|
856
|
-
/* @__PURE__ */ (0,
|
|
857
|
-
/* @__PURE__ */ (0,
|
|
858
|
-
/* @__PURE__ */ (0,
|
|
859
|
-
/* @__PURE__ */ (0,
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { style: labelStyle, children: "API Key" }),
|
|
1063
|
+
/* @__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" }),
|
|
1064
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, color: "var(--text-muted)" }, children: "Keep this secret. Rotate from the dashboard." })
|
|
860
1065
|
] }),
|
|
861
|
-
/* @__PURE__ */ (0,
|
|
862
|
-
/* @__PURE__ */ (0,
|
|
863
|
-
/* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
1066
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
|
|
1067
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { style: labelStyle, children: "Status" }),
|
|
1068
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { readOnly: true, style: inputStyle("error"), defaultValue: "invalid-slug!" }),
|
|
1069
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, color: "var(--error)" }, children: "Only lowercase letters, numbers, and hyphens." })
|
|
865
1070
|
] })
|
|
866
1071
|
] })
|
|
867
1072
|
] }),
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
/* @__PURE__ */ (0,
|
|
870
|
-
/* @__PURE__ */ (0,
|
|
871
|
-
/* @__PURE__ */ (0,
|
|
1073
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1074
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Code Block" }),
|
|
1075
|
+
/* @__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: [
|
|
1076
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--text-disabled)" }, children: "// Initialize AG Auth" }),
|
|
872
1077
|
"\n",
|
|
873
|
-
/* @__PURE__ */ (0,
|
|
1078
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "import" }),
|
|
874
1079
|
" { createClient } ",
|
|
875
|
-
/* @__PURE__ */ (0,
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "from" }),
|
|
876
1081
|
" ",
|
|
877
|
-
/* @__PURE__ */ (0,
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--success)" }, children: "'@ag/auth'" }),
|
|
878
1083
|
"\n\n",
|
|
879
|
-
/* @__PURE__ */ (0,
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "const" }),
|
|
880
1085
|
" auth = ",
|
|
881
|
-
/* @__PURE__ */ (0,
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--info)" }, children: "createClient" }),
|
|
882
1087
|
"({\n",
|
|
883
1088
|
" projectId: ",
|
|
884
|
-
/* @__PURE__ */ (0,
|
|
1089
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--success)" }, children: "'proj_xxxxxxxx'" }),
|
|
885
1090
|
",\n",
|
|
886
1091
|
" secret: process.env.",
|
|
887
|
-
/* @__PURE__ */ (0,
|
|
1092
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--info)" }, children: "AG_SECRET" }),
|
|
888
1093
|
",\n",
|
|
889
1094
|
" ttl: ",
|
|
890
|
-
/* @__PURE__ */ (0,
|
|
1095
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--warning)" }, children: "3600" }),
|
|
891
1096
|
",\n",
|
|
892
1097
|
"})\n\n",
|
|
893
|
-
/* @__PURE__ */ (0,
|
|
1098
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent-bright)" }, children: "export default" }),
|
|
894
1099
|
" auth"
|
|
895
1100
|
] })
|
|
896
1101
|
] }),
|
|
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,
|
|
1102
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1103
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Navigation" }),
|
|
1104
|
+
/* @__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: [
|
|
1105
|
+
/* @__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: [
|
|
1106
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
|
|
1107
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 18 L9 6 L14 18", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
1108
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "14", x2: "12", y2: "14", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
|
|
1109
|
+
/* @__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" }),
|
|
1110
|
+
/* @__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
1111
|
] }),
|
|
907
1112
|
"Adarsh"
|
|
908
1113
|
] }),
|
|
909
|
-
/* @__PURE__ */ (0,
|
|
910
|
-
/* @__PURE__ */ (0,
|
|
911
|
-
/* @__PURE__ */ (0,
|
|
912
|
-
/* @__PURE__ */ (0,
|
|
1114
|
+
/* @__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)) }),
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeToggle, {}),
|
|
1117
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Hire me" })
|
|
913
1118
|
] })
|
|
914
1119
|
] })
|
|
915
1120
|
] }),
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
917
|
-
/* @__PURE__ */ (0,
|
|
918
|
-
/* @__PURE__ */ (0,
|
|
1121
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1122
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Tooltip" }),
|
|
1123
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
919
1124
|
"div",
|
|
920
1125
|
{
|
|
921
1126
|
style: { position: "relative", display: "inline-block" },
|
|
922
1127
|
onMouseEnter: () => setTooltipVisible(true),
|
|
923
1128
|
onMouseLeave: () => setTooltipVisible(false),
|
|
924
1129
|
children: [
|
|
925
|
-
/* @__PURE__ */ (0,
|
|
926
|
-
tooltipVisible && /* @__PURE__ */ (0,
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: btnStyle("secondary"), children: "Hover me" }),
|
|
1131
|
+
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
1132
|
]
|
|
928
1133
|
}
|
|
929
1134
|
)
|
|
930
1135
|
] }),
|
|
931
|
-
/* @__PURE__ */ (0,
|
|
932
|
-
/* @__PURE__ */ (0,
|
|
933
|
-
/* @__PURE__ */ (0,
|
|
1136
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Tags" }),
|
|
1138
|
+
/* @__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
1139
|
] })
|
|
935
1140
|
] });
|
|
936
1141
|
}
|
|
@@ -982,7 +1187,7 @@ function ThemePage({ version = package_default.version }) {
|
|
|
982
1187
|
const colorValues = useTokenMap(COLOR_TOKENS);
|
|
983
1188
|
const mono = { fontFamily: "var(--brand-font-mono)" };
|
|
984
1189
|
const dot = { width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block" };
|
|
985
|
-
return /* @__PURE__ */ (0,
|
|
1190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
|
|
986
1191
|
background: "var(--bg-base)",
|
|
987
1192
|
color: "var(--text-primary)",
|
|
988
1193
|
fontFamily: "var(--brand-font-body)",
|
|
@@ -990,9 +1195,9 @@ function ThemePage({ version = package_default.version }) {
|
|
|
990
1195
|
lineHeight: 1.6,
|
|
991
1196
|
WebkitFontSmoothing: "antialiased",
|
|
992
1197
|
minHeight: "100vh"
|
|
993
|
-
}, children: /* @__PURE__ */ (0,
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
995
|
-
/* @__PURE__ */ (0,
|
|
1198
|
+
}, 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: [
|
|
1199
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
|
|
1200
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
|
|
996
1201
|
position: "absolute",
|
|
997
1202
|
top: -80,
|
|
998
1203
|
left: -120,
|
|
@@ -1001,131 +1206,131 @@ function ThemePage({ version = package_default.version }) {
|
|
|
1001
1206
|
background: "radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%)",
|
|
1002
1207
|
pointerEvents: "none"
|
|
1003
1208
|
} }),
|
|
1004
|
-
/* @__PURE__ */ (0,
|
|
1005
|
-
/* @__PURE__ */ (0,
|
|
1209
|
+
/* @__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: [
|
|
1210
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: 24, height: 1, background: "var(--border-mid)", display: "inline-block" } }),
|
|
1006
1211
|
"@adarsh_goswami/brand",
|
|
1007
|
-
version && /* @__PURE__ */ (0,
|
|
1212
|
+
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
1213
|
"v",
|
|
1009
1214
|
version
|
|
1010
1215
|
] })
|
|
1011
1216
|
] }),
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1013
|
-
/* @__PURE__ */ (0,
|
|
1014
|
-
/* @__PURE__ */ (0,
|
|
1015
|
-
/* @__PURE__ */ (0,
|
|
1217
|
+
/* @__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: [
|
|
1218
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--text-primary)" }, children: "Design" }),
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", {}),
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "var(--accent)" }, children: "System" })
|
|
1016
1221
|
] }),
|
|
1017
|
-
/* @__PURE__ */ (0,
|
|
1018
|
-
/* @__PURE__ */ (0,
|
|
1019
|
-
/* @__PURE__ */ (0,
|
|
1222
|
+
/* @__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." }),
|
|
1223
|
+
/* @__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: [
|
|
1224
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: dot }),
|
|
1020
1225
|
tech
|
|
1021
1226
|
] }, tech)) })
|
|
1022
1227
|
] }),
|
|
1023
|
-
/* @__PURE__ */ (0,
|
|
1024
|
-
/* @__PURE__ */ (0,
|
|
1025
|
-
/* @__PURE__ */ (0,
|
|
1026
|
-
/* @__PURE__ */ (0,
|
|
1228
|
+
/* @__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: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: logoCardStyle("dark"), children: [
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgMark, { size: 64, variant: "dark" }),
|
|
1231
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("dark"), children: "Primary \u2014 Dark" })
|
|
1027
1232
|
] }),
|
|
1028
|
-
/* @__PURE__ */ (0,
|
|
1029
|
-
/* @__PURE__ */ (0,
|
|
1030
|
-
/* @__PURE__ */ (0,
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: logoCardStyle("glow"), children: [
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgMark, { size: 64, variant: "glow" }),
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("dark"), children: "Glow Variant" })
|
|
1031
1236
|
] }),
|
|
1032
|
-
/* @__PURE__ */ (0,
|
|
1033
|
-
/* @__PURE__ */ (0,
|
|
1034
|
-
/* @__PURE__ */ (0,
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: logoCardStyle("light"), children: [
|
|
1238
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgMark, { size: 64, variant: "light" }),
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("light"), children: "Light Variant" })
|
|
1035
1240
|
] }),
|
|
1036
|
-
/* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1038
|
-
/* @__PURE__ */ (0,
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
|
|
1242
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgWordmark, {}),
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: logoLabelStyle("dark"), children: "Wordmark" })
|
|
1039
1244
|
] })
|
|
1040
1245
|
] }) }),
|
|
1041
|
-
/* @__PURE__ */ (0,
|
|
1042
|
-
/* @__PURE__ */ (0,
|
|
1043
|
-
/* @__PURE__ */ (0,
|
|
1044
|
-
/* @__PURE__ */ (0,
|
|
1045
|
-
/* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1246
|
+
/* @__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: [
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Accent" }),
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1249
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent-bright", label: "Bright", values: colorValues }),
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent", label: "Base", values: colorValues }),
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent-dim", label: "Dim", values: colorValues }),
|
|
1252
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--accent-glow", label: "Glow", values: colorValues })
|
|
1048
1253
|
] }),
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
1050
|
-
/* @__PURE__ */ (0,
|
|
1051
|
-
/* @__PURE__ */ (0,
|
|
1052
|
-
/* @__PURE__ */ (0,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1054
|
-
/* @__PURE__ */ (0,
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Backgrounds" }),
|
|
1255
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-base", label: "Base", values: colorValues }),
|
|
1257
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-surface", label: "Surface", values: colorValues }),
|
|
1258
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-raised", label: "Raised", values: colorValues }),
|
|
1259
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--bg-overlay", label: "Overlay", values: colorValues })
|
|
1055
1260
|
] }),
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1057
|
-
/* @__PURE__ */ (0,
|
|
1058
|
-
/* @__PURE__ */ (0,
|
|
1059
|
-
/* @__PURE__ */ (0,
|
|
1060
|
-
/* @__PURE__ */ (0,
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Borders" }),
|
|
1262
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1263
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--border-subtle", label: "Subtle", values: colorValues }),
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--border-soft", label: "Soft", values: colorValues }),
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--border-mid", label: "Mid", values: colorValues })
|
|
1061
1266
|
] }),
|
|
1062
|
-
/* @__PURE__ */ (0,
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1064
|
-
/* @__PURE__ */ (0,
|
|
1065
|
-
/* @__PURE__ */ (0,
|
|
1066
|
-
/* @__PURE__ */ (0,
|
|
1067
|
-
/* @__PURE__ */ (0,
|
|
1267
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Text" }),
|
|
1268
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-primary", label: "Primary", values: colorValues }),
|
|
1270
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-secondary", label: "Secondary", values: colorValues }),
|
|
1271
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-muted", label: "Muted", values: colorValues }),
|
|
1272
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--text-disabled", label: "Disabled", values: colorValues })
|
|
1068
1273
|
] }),
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1072
|
-
/* @__PURE__ */ (0,
|
|
1073
|
-
/* @__PURE__ */ (0,
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Semantic" }),
|
|
1275
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ColorGrid, { children: [
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--success", label: "Success", values: colorValues }),
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--warning", label: "Warning", values: colorValues }),
|
|
1278
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--error", label: "Error", values: colorValues }),
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorSwatch, { token: "--info", label: "Info", values: colorValues })
|
|
1075
1280
|
] })
|
|
1076
1281
|
] }),
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1078
|
-
/* @__PURE__ */ (0,
|
|
1079
|
-
/* @__PURE__ */ (0,
|
|
1080
|
-
/* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1282
|
+
/* @__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: [
|
|
1283
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Families" }),
|
|
1284
|
+
/* @__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: [
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontFamily: cssFamily, fontWeight: weight, fontSize: "var(--brand-text-lg)", color: "var(--text-primary)" }, children: sample }),
|
|
1286
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }, children: token })
|
|
1082
1287
|
] }, token)) }),
|
|
1083
|
-
/* @__PURE__ */ (0,
|
|
1084
|
-
/* @__PURE__ */ (0,
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1086
|
-
/* @__PURE__ */ (0,
|
|
1087
|
-
/* @__PURE__ */ (0,
|
|
1088
|
-
/* @__PURE__ */ (0,
|
|
1288
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Scale" }),
|
|
1289
|
+
/* @__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: [
|
|
1290
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
|
|
1291
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }, children: token }),
|
|
1292
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: label }),
|
|
1293
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: role })
|
|
1089
1294
|
] }),
|
|
1090
|
-
/* @__PURE__ */ (0,
|
|
1295
|
+
/* @__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
1296
|
] }, token)) })
|
|
1092
1297
|
] }),
|
|
1093
|
-
/* @__PURE__ */ (0,
|
|
1094
|
-
/* @__PURE__ */ (0,
|
|
1095
|
-
/* @__PURE__ */ (0,
|
|
1096
|
-
/* @__PURE__ */ (0,
|
|
1097
|
-
/* @__PURE__ */ (0,
|
|
1298
|
+
/* @__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: [
|
|
1299
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 70 }, children: token }),
|
|
1300
|
+
/* @__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 } }) }),
|
|
1301
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 11, color: "var(--text-secondary)", minWidth: 50 }, children: rem }),
|
|
1302
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 40 }, children: px })
|
|
1098
1303
|
] }, token)) }) }),
|
|
1099
|
-
/* @__PURE__ */ (0,
|
|
1100
|
-
/* @__PURE__ */ (0,
|
|
1101
|
-
/* @__PURE__ */ (0,
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
/* @__PURE__ */ (0,
|
|
1304
|
+
/* @__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: [
|
|
1305
|
+
/* @__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})` } }),
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { textAlign: "center" }, children: [
|
|
1307
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)" }, children: label }),
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: value })
|
|
1104
1309
|
] })
|
|
1105
1310
|
] }, token)) }) }),
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
/* @__PURE__ */ (0,
|
|
1108
|
-
/* @__PURE__ */ (0,
|
|
1109
|
-
/* @__PURE__ */ (0,
|
|
1311
|
+
/* @__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: [
|
|
1312
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-1)" }, children: token }),
|
|
1313
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-secondary)", marginBottom: "var(--sp-1)" }, children: label }),
|
|
1314
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-muted)" }, children: desc })
|
|
1110
1315
|
] }, 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,
|
|
1316
|
+
/* @__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, {}) }),
|
|
1317
|
+
/* @__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: [
|
|
1318
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Easing" }),
|
|
1319
|
+
/* @__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: [
|
|
1320
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1321
|
+
/* @__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 }),
|
|
1322
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: value }),
|
|
1323
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1119
1324
|
] }, token)) }),
|
|
1120
|
-
/* @__PURE__ */ (0,
|
|
1121
|
-
/* @__PURE__ */ (0,
|
|
1122
|
-
/* @__PURE__ */ (0,
|
|
1123
|
-
/* @__PURE__ */ (0,
|
|
1124
|
-
/* @__PURE__ */ (0,
|
|
1125
|
-
/* @__PURE__ */ (0,
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SectionLabel, { children: "Duration" }),
|
|
1326
|
+
/* @__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: [
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
|
|
1328
|
+
/* @__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 }),
|
|
1329
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: label }),
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
|
|
1126
1331
|
] }, token)) })
|
|
1127
1332
|
] }),
|
|
1128
|
-
/* @__PURE__ */ (0,
|
|
1333
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Footer, {})
|
|
1129
1334
|
] }) });
|
|
1130
1335
|
}
|
|
1131
1336
|
function logoCardStyle(bg) {
|
|
@@ -1171,6 +1376,7 @@ var favicon_default = 'data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" x
|
|
|
1171
1376
|
0 && (module.exports = {
|
|
1172
1377
|
AgMark,
|
|
1173
1378
|
AgWordmark,
|
|
1379
|
+
BlogPost,
|
|
1174
1380
|
DocsLayout,
|
|
1175
1381
|
Footer,
|
|
1176
1382
|
ThemePage,
|