@adarsh_goswami/design 0.1.14-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.
Files changed (5) hide show
  1. package/dist/index.cjs +10 -40
  2. package/dist/index.d.cts +1 -6
  3. package/dist/index.d.ts +1 -6
  4. package/dist/index.js +88 -118
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -51,10 +51,6 @@ var import_remark_gfm = __toESM(require("remark-gfm"), 1);
51
51
  var import_rehype_highlight = __toESM(require("rehype-highlight"), 1);
52
52
  var import_themes = require("@radix-ui/themes");
53
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
54
  var markdownComponents = {
59
55
  h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
56
  import_themes.Heading,
@@ -241,42 +237,16 @@ var markdownComponents = {
241
237
  ),
242
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" }) })
243
239
  };
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
- ] });
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
+ ) });
280
250
  }
281
251
 
282
252
  // src/components/DocsLayout/DocsLayout.tsx
package/dist/index.d.cts CHANGED
@@ -2,14 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  interface BlogPostProps {
5
- title: string;
6
- date: string;
7
- tags?: string[];
8
5
  content: string;
9
- readingTime?: number;
10
- onBack?: () => void;
11
6
  }
12
- declare function BlogPost({ title, date, tags, content, readingTime, onBack, }: BlogPostProps): react_jsx_runtime.JSX.Element;
7
+ declare function BlogPost({ content }: BlogPostProps): react_jsx_runtime.JSX.Element;
13
8
 
14
9
  interface DocsMeta {
15
10
  title: string;
package/dist/index.d.ts CHANGED
@@ -2,14 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  interface BlogPostProps {
5
- title: string;
6
- date: string;
7
- tags?: string[];
8
5
  content: string;
9
- readingTime?: number;
10
- onBack?: () => void;
11
6
  }
12
- declare function BlogPost({ title, date, tags, content, readingTime, onBack, }: BlogPostProps): react_jsx_runtime.JSX.Element;
7
+ declare function BlogPost({ content }: BlogPostProps): react_jsx_runtime.JSX.Element;
13
8
 
14
9
  interface DocsMeta {
15
10
  title: string;
package/dist/index.js CHANGED
@@ -3,11 +3,7 @@ import ReactMarkdown from "react-markdown";
3
3
  import remarkGfm from "remark-gfm";
4
4
  import rehypeHighlight from "rehype-highlight";
5
5
  import { Box, Flex, Heading, Separator, Text } from "@radix-ui/themes";
6
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
- function calcReadingTime(content) {
8
- const words = content.trim().split(/\s+/).filter(Boolean).length;
9
- return Math.ceil(words / 200);
10
- }
6
+ import { jsx } from "react/jsx-runtime";
11
7
  var markdownComponents = {
12
8
  h1: ({ children }) => /* @__PURE__ */ jsx(
13
9
  Heading,
@@ -194,42 +190,16 @@ var markdownComponents = {
194
190
  ),
195
191
  hr: () => /* @__PURE__ */ jsx(Flex, { my: "6", children: /* @__PURE__ */ jsx(Separator, { size: "4" }) })
196
192
  };
197
- function BlogPost({
198
- title,
199
- date,
200
- tags = [],
201
- content,
202
- readingTime,
203
- onBack
204
- }) {
205
- const minutes = readingTime ?? calcReadingTime(content);
206
- return /* @__PURE__ */ jsxs("article", { className: "blog-post", children: [
207
- onBack && /* @__PURE__ */ jsx("button", { className: "blog-post__back", onClick: onBack, children: "\u2190 Back" }),
208
- /* @__PURE__ */ jsxs("header", { children: [
209
- /* @__PURE__ */ jsx("h1", { className: "blog-post__title", children: title }),
210
- /* @__PURE__ */ jsxs("div", { className: "blog-post__meta", children: [
211
- /* @__PURE__ */ jsx("span", { className: "blog-post__meta-text", children: date }),
212
- /* @__PURE__ */ jsx("span", { className: "blog-post__meta-dot", children: "\xB7" }),
213
- /* @__PURE__ */ jsxs("span", { className: "blog-post__meta-text", children: [
214
- minutes,
215
- " min read"
216
- ] }),
217
- tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
218
- /* @__PURE__ */ jsx("span", { className: "blog-post__meta-dot", children: "\xB7" }),
219
- /* @__PURE__ */ jsx("div", { className: "blog-post__tags", children: tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "blog-post__tag", children: tag }, tag)) })
220
- ] })
221
- ] })
222
- ] }),
223
- /* @__PURE__ */ jsx(
224
- ReactMarkdown,
225
- {
226
- remarkPlugins: [remarkGfm],
227
- rehypePlugins: [rehypeHighlight],
228
- components: markdownComponents,
229
- children: content
230
- }
231
- )
232
- ] });
193
+ function BlogPost({ content }) {
194
+ return /* @__PURE__ */ jsx("article", { className: "blog-post", children: /* @__PURE__ */ jsx(
195
+ ReactMarkdown,
196
+ {
197
+ remarkPlugins: [remarkGfm],
198
+ rehypePlugins: [rehypeHighlight],
199
+ components: markdownComponents,
200
+ children: content
201
+ }
202
+ ) });
233
203
  }
234
204
 
235
205
  // src/components/DocsLayout/DocsLayout.tsx
@@ -237,7 +207,7 @@ import { Badge as Badge2, Box as Box4, Flex as Flex4, Heading as Heading4, Separ
237
207
 
238
208
  // src/components/DocsLayout/NavSidebar.tsx
239
209
  import { Badge, Box as Box2, Flex as Flex2, Heading as Heading2, ScrollArea, Separator as Separator2, Text as Text2 } from "@radix-ui/themes";
240
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
210
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
241
211
  function NavStatusBadge({ status }) {
242
212
  if (status === "final") return null;
243
213
  return /* @__PURE__ */ jsx2(Badge, { size: "1", variant: "soft", color: status === "draft" ? "yellow" : "gray", children: status });
@@ -258,7 +228,7 @@ function NavLeaf({
258
228
  type: "button",
259
229
  onClick: () => onSlugChange(slug),
260
230
  style: { width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0 },
261
- children: /* @__PURE__ */ jsxs2(
231
+ children: /* @__PURE__ */ jsxs(
262
232
  Flex2,
263
233
  {
264
234
  align: "center",
@@ -310,8 +280,8 @@ function NavItemRow({
310
280
  }
311
281
  );
312
282
  }
313
- return /* @__PURE__ */ jsxs2(Box2, { mb: "1", children: [
314
- /* @__PURE__ */ jsxs2(Flex2, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
283
+ return /* @__PURE__ */ jsxs(Box2, { mb: "1", children: [
284
+ /* @__PURE__ */ jsxs(Flex2, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
315
285
  /* @__PURE__ */ jsx2(
316
286
  Text2,
317
287
  {
@@ -343,7 +313,7 @@ function NavItemRow({
343
313
  ] });
344
314
  }
345
315
  function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
346
- return /* @__PURE__ */ jsxs2(
316
+ return /* @__PURE__ */ jsxs(
347
317
  Box2,
348
318
  {
349
319
  style: {
@@ -362,7 +332,7 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
362
332
  px: "4",
363
333
  py: "3",
364
334
  style: { borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 },
365
- children: /* @__PURE__ */ jsxs2(Flex2, { align: "center", gap: "2", children: [
335
+ children: /* @__PURE__ */ jsxs(Flex2, { align: "center", gap: "2", children: [
366
336
  meta.logoUrl && /* @__PURE__ */ jsx2("img", { src: meta.logoUrl, alt: meta.title, style: { height: "20px", width: "auto" } }),
367
337
  /* @__PURE__ */ jsx2(
368
338
  Heading2,
@@ -377,7 +347,7 @@ function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
377
347
  ] })
378
348
  }
379
349
  ),
380
- /* @__PURE__ */ jsx2(ScrollArea, { scrollbars: "vertical", style: { flex: 1 }, children: /* @__PURE__ */ jsx2(Box2, { p: "4", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs2(Box2, { mb: "4", children: [
350
+ /* @__PURE__ */ jsx2(ScrollArea, { scrollbars: "vertical", style: { flex: 1 }, children: /* @__PURE__ */ jsx2(Box2, { p: "4", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Box2, { mb: "4", children: [
381
351
  /* @__PURE__ */ jsx2(
382
352
  Text2,
383
353
  {
@@ -623,7 +593,7 @@ function MarkdownContent({ content }) {
623
593
  }
624
594
 
625
595
  // src/components/DocsLayout/DocsLayout.tsx
626
- import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
596
+ import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
627
597
  var PAGE_TYPE_COLORS = {
628
598
  prd: "violet",
629
599
  adr: "blue",
@@ -636,7 +606,7 @@ function PageTypeBadge({ type }) {
636
606
  function DocsLayout({ data, activeSlug, onSlugChange }) {
637
607
  const { meta, navigation, pages } = data;
638
608
  const page = pages[activeSlug];
639
- return /* @__PURE__ */ jsx4(Flex4, { direction: "column", style: { height: "100vh", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsxs3(Flex4, { direction: "row", style: { flex: 1, overflow: "hidden" }, children: [
609
+ return /* @__PURE__ */ jsx4(Flex4, { direction: "column", style: { height: "100vh", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsxs2(Flex4, { direction: "row", style: { flex: 1, overflow: "hidden" }, children: [
640
610
  /* @__PURE__ */ jsx4(
641
611
  NavSidebar,
642
612
  {
@@ -646,10 +616,10 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
646
616
  onSlugChange
647
617
  }
648
618
  ),
649
- /* @__PURE__ */ jsx4(Box4, { style: { flex: 1, overflow: "hidden", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsx4(ScrollArea2, { scrollbars: "vertical", style: { height: "100%" }, children: /* @__PURE__ */ jsx4(Box4, { p: "8", style: { maxWidth: "768px", margin: "0 auto" }, children: !page ? /* @__PURE__ */ jsx4(Flex4, { align: "center", justify: "center", style: { height: "300px" }, children: /* @__PURE__ */ jsx4(Text4, { size: "3", style: { color: "var(--text-muted)" }, children: "Page not found" }) }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
650
- /* @__PURE__ */ jsxs3(Flex4, { align: "center", gap: "3", mb: "3", children: [
619
+ /* @__PURE__ */ jsx4(Box4, { style: { flex: 1, overflow: "hidden", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsx4(ScrollArea2, { scrollbars: "vertical", style: { height: "100%" }, children: /* @__PURE__ */ jsx4(Box4, { p: "8", style: { maxWidth: "768px", margin: "0 auto" }, children: !page ? /* @__PURE__ */ jsx4(Flex4, { align: "center", justify: "center", style: { height: "300px" }, children: /* @__PURE__ */ jsx4(Text4, { size: "3", style: { color: "var(--text-muted)" }, children: "Page not found" }) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
620
+ /* @__PURE__ */ jsxs2(Flex4, { align: "center", gap: "3", mb: "3", children: [
651
621
  page.type && /* @__PURE__ */ jsx4(PageTypeBadge, { type: page.type }),
652
- page.lastUpdated && /* @__PURE__ */ jsxs3(
622
+ page.lastUpdated && /* @__PURE__ */ jsxs2(
653
623
  Text4,
654
624
  {
655
625
  size: "1",
@@ -681,13 +651,13 @@ function DocsLayout({ data, activeSlug, onSlugChange }) {
681
651
  }
682
652
 
683
653
  // src/components/Logo/Logo.tsx
684
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
654
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
685
655
  function AgMark({ size = 64, variant = "dark" }) {
686
656
  const aPrimary = variant === "light" ? "#4A3FCC" : variant === "glow" ? "#9B8FFB" : "#7C6EFA";
687
657
  const gPrimary = variant === "light" ? "#0A0A0B" : "#F0EEF8";
688
658
  const bgFill = variant === "light" ? "#F0EEF8" : variant === "glow" ? "url(#agGlowGrad)" : "#111113";
689
- return /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 64 64", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
690
- variant === "glow" && /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs4("radialGradient", { id: "agGlowGrad", cx: "30%", cy: "30%", r: "80%", children: [
659
+ return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 64 64", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
660
+ variant === "glow" && /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("radialGradient", { id: "agGlowGrad", cx: "30%", cy: "30%", r: "80%", children: [
691
661
  /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#1A1630" }),
692
662
  /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#0D0C1A" })
693
663
  ] }) }),
@@ -699,15 +669,15 @@ function AgMark({ size = 64, variant = "dark" }) {
699
669
  ] });
700
670
  }
701
671
  function AgWordmark() {
702
- return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
703
- /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
672
+ return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
673
+ /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
704
674
  /* @__PURE__ */ jsx5("rect", { width: "36", height: "36", rx: "8", fill: "#18181C" }),
705
675
  /* @__PURE__ */ jsx5("path", { d: "M6 26 L13 10 L20 26", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
706
676
  /* @__PURE__ */ jsx5("line", { x1: "9", y1: "20.5", x2: "17", y2: "20.5", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
707
677
  /* @__PURE__ */ jsx5("path", { d: "M23 16.5 C23 13.5 25.5 12 28 12 C30.5 12 32 13.5 32 16.5 L32 18.5 L28.5 18.5 L28.5 16.5", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
708
678
  /* @__PURE__ */ jsx5("path", { d: "M23 16.5 C23 19 23 21.5 23 23 C23 25 25.5 26 28 26 C30.5 26 32 25 32 23 L32 18.5", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
709
679
  ] }),
710
- /* @__PURE__ */ jsxs4("span", { style: { fontFamily: "var(--brand-font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-primary)", letterSpacing: "-0.02em" }, children: [
680
+ /* @__PURE__ */ jsxs3("span", { style: { fontFamily: "var(--brand-font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-primary)", letterSpacing: "-0.02em" }, children: [
711
681
  "Adarsh",
712
682
  /* @__PURE__ */ jsx5("span", { style: { color: "var(--accent)" }, children: "." })
713
683
  ] })
@@ -715,10 +685,10 @@ function AgWordmark() {
715
685
  }
716
686
 
717
687
  // src/components/Footer/Footer.tsx
718
- import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
688
+ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
719
689
  function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
720
690
  const mono = { fontFamily: "var(--brand-font-mono)" };
721
- return /* @__PURE__ */ jsxs5("div", { style: {
691
+ return /* @__PURE__ */ jsxs4("div", { style: {
722
692
  paddingTop: "var(--sp-16)",
723
693
  paddingBottom: "var(--sp-8)",
724
694
  borderTop: "1px solid var(--border-subtle)",
@@ -729,12 +699,12 @@ function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
729
699
  gap: "var(--sp-4)"
730
700
  }, children: [
731
701
  /* @__PURE__ */ jsx6(AgWordmark, {}),
732
- /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
733
- /* @__PURE__ */ jsxs5("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
702
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
703
+ /* @__PURE__ */ jsxs4("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
734
704
  /* @__PURE__ */ jsx6("circle", { cx: "6", cy: "6", r: "5.5", stroke: "var(--border-soft)" }),
735
705
  /* @__PURE__ */ jsx6("path", { d: "M8 4.5A2.5 2.5 0 1 0 8 7.5", stroke: "var(--text-disabled)", strokeWidth: "1", strokeLinecap: "round" })
736
706
  ] }),
737
- /* @__PURE__ */ jsxs5("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
707
+ /* @__PURE__ */ jsxs4("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
738
708
  year,
739
709
  " Adarsh Goswami. All rights reserved."
740
710
  ] })
@@ -856,7 +826,7 @@ var package_default = {
856
826
  };
857
827
 
858
828
  // src/components/ThemePage/ThemePage.tsx
859
- import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
829
+ import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
860
830
  function useTokenMap(tokens) {
861
831
  const [map, setMap] = useState2({});
862
832
  useEffect2(() => {
@@ -878,7 +848,7 @@ function SectionLabel({ children }) {
878
848
  }, children });
879
849
  }
880
850
  function Section({ label, title, description, children, first }) {
881
- return /* @__PURE__ */ jsxs6("section", { style: {
851
+ return /* @__PURE__ */ jsxs5("section", { style: {
882
852
  marginBottom: "var(--sp-24)",
883
853
  paddingTop: first ? 0 : "var(--sp-24)",
884
854
  borderTop: first ? "none" : "1px solid var(--border-subtle)"
@@ -890,9 +860,9 @@ function Section({ label, title, description, children, first }) {
890
860
  ] });
891
861
  }
892
862
  function ColorSwatch({ token, label, values }) {
893
- return /* @__PURE__ */ jsxs6("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
863
+ return /* @__PURE__ */ jsxs5("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
894
864
  /* @__PURE__ */ jsx9("div", { style: { height: 56, background: `var(${token})` } }),
895
- /* @__PURE__ */ jsxs6("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
865
+ /* @__PURE__ */ jsxs5("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
896
866
  /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", fontWeight: 500, color: "var(--text-primary)", marginBottom: 2 }, children: label }),
897
867
  /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-muted)" }, children: token }),
898
868
  values[token] && /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: values[token] })
@@ -997,22 +967,22 @@ function fontFamilyVar(family) {
997
967
  function ComponentsSection() {
998
968
  const [tooltipVisible, setTooltipVisible] = useState2(false);
999
969
  const mono = { fontFamily: "var(--brand-font-mono)" };
1000
- return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
1001
- /* @__PURE__ */ jsxs6("div", { children: [
970
+ return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
971
+ /* @__PURE__ */ jsxs5("div", { children: [
1002
972
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Buttons" }),
1003
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
973
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
1004
974
  /* @__PURE__ */ jsx9("button", { style: btnStyle("primary"), children: "Deploy service" }),
1005
975
  /* @__PURE__ */ jsx9("button", { style: btnStyle("secondary"), children: "View source" }),
1006
976
  /* @__PURE__ */ jsx9("button", { style: btnStyle("ghost"), children: "Cancel" }),
1007
977
  /* @__PURE__ */ jsx9("button", { style: btnStyle("danger"), children: "Delete" })
1008
978
  ] }),
1009
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
979
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
1010
980
  /* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Small" }),
1011
981
  /* @__PURE__ */ jsx9("button", { style: btnStyle("primary"), children: "Default" }),
1012
982
  /* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("lg") }, children: "Large" })
1013
983
  ] })
1014
984
  ] }),
1015
- /* @__PURE__ */ jsxs6("div", { children: [
985
+ /* @__PURE__ */ jsxs5("div", { children: [
1016
986
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Badges" }),
1017
987
  /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
1018
988
  { label: "Default", bg: "var(--bg-overlay)", color: "var(--text-secondary)", border: "var(--border-soft)" },
@@ -1022,40 +992,40 @@ function ComponentsSection() {
1022
992
  { label: "\u25CF Offline", bg: "var(--error-bg)", color: "var(--error)", border: "var(--error-border)" }
1023
993
  ].map((b) => /* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 10, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase", padding: "3px 8px", borderRadius: "var(--brand-radius-sm)", background: b.bg, color: b.color, border: `1px solid ${b.border}` }, children: b.label }, b.label)) })
1024
994
  ] }),
1025
- /* @__PURE__ */ jsxs6("div", { children: [
995
+ /* @__PURE__ */ jsxs5("div", { children: [
1026
996
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Cards" }),
1027
997
  /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--sp-4)" }, children: [
1028
998
  { icon: "\u{1F510}", title: "Auth Service", body: "JWT-based auth with refresh tokens, OAuth2, and session management." },
1029
999
  { icon: "\u{1F4B3}", title: "Payments", body: "Stripe-powered billing with webhooks, subscriptions, and invoicing." },
1030
1000
  { icon: "\u{1F4E8}", title: "Notifications", body: "Email, push, and in-app notification service with templates." }
1031
- ].map((card) => /* @__PURE__ */ jsxs6("div", { style: { background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-6)" }, children: [
1001
+ ].map((card) => /* @__PURE__ */ jsxs5("div", { style: { background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-6)" }, children: [
1032
1002
  /* @__PURE__ */ jsx9("div", { style: { width: 36, height: 36, borderRadius: "var(--brand-radius-md)", background: "var(--accent-subtle)", border: "1px solid var(--accent-border)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "var(--sp-4)", fontSize: 16 }, children: card.icon }),
1033
1003
  /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 600, color: "var(--text-primary)", marginBottom: "var(--sp-2)" }, children: card.title }),
1034
1004
  /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.6 }, children: card.body })
1035
1005
  ] }, card.title)) })
1036
1006
  ] }),
1037
- /* @__PURE__ */ jsxs6("div", { children: [
1007
+ /* @__PURE__ */ jsxs5("div", { children: [
1038
1008
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Form Inputs" }),
1039
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
1040
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
1009
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
1010
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
1041
1011
  /* @__PURE__ */ jsx9("label", { style: labelStyle, children: "Project name" }),
1042
1012
  /* @__PURE__ */ jsx9("input", { readOnly: true, style: inputStyle(), placeholder: "my-awesome-app", defaultValue: "" })
1043
1013
  ] }),
1044
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
1014
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
1045
1015
  /* @__PURE__ */ jsx9("label", { style: labelStyle, children: "API Key" }),
1046
1016
  /* @__PURE__ */ jsx9("input", { readOnly: true, style: { ...inputStyle(), ...mono, fontSize: 13 }, defaultValue: "ag_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u20223fa2" }),
1047
1017
  /* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: "var(--text-muted)" }, children: "Keep this secret. Rotate from the dashboard." })
1048
1018
  ] }),
1049
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
1019
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
1050
1020
  /* @__PURE__ */ jsx9("label", { style: labelStyle, children: "Status" }),
1051
1021
  /* @__PURE__ */ jsx9("input", { readOnly: true, style: inputStyle("error"), defaultValue: "invalid-slug!" }),
1052
1022
  /* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: "var(--error)" }, children: "Only lowercase letters, numbers, and hyphens." })
1053
1023
  ] })
1054
1024
  ] })
1055
1025
  ] }),
1056
- /* @__PURE__ */ jsxs6("div", { children: [
1026
+ /* @__PURE__ */ jsxs5("div", { children: [
1057
1027
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Code Block" }),
1058
- /* @__PURE__ */ jsxs6("div", { style: { ...mono, background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-lg)", padding: "var(--sp-5) var(--sp-6)", fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.8, overflowX: "auto" }, children: [
1028
+ /* @__PURE__ */ jsxs5("div", { style: { ...mono, background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-lg)", padding: "var(--sp-5) var(--sp-6)", fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.8, overflowX: "auto" }, children: [
1059
1029
  /* @__PURE__ */ jsx9("span", { style: { color: "var(--text-disabled)" }, children: "// Initialize AG Auth" }),
1060
1030
  "\n",
1061
1031
  /* @__PURE__ */ jsx9("span", { style: { color: "var(--accent-bright)" }, children: "import" }),
@@ -1082,11 +1052,11 @@ function ComponentsSection() {
1082
1052
  " auth"
1083
1053
  ] })
1084
1054
  ] }),
1085
- /* @__PURE__ */ jsxs6("div", { children: [
1055
+ /* @__PURE__ */ jsxs5("div", { children: [
1086
1056
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Navigation" }),
1087
- /* @__PURE__ */ jsxs6("div", { style: { background: "rgba(10,10,11,0.8)", backdropFilter: "blur(12px)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-3) var(--sp-5)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
1088
- /* @__PURE__ */ jsxs6("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)", display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
1089
- /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
1057
+ /* @__PURE__ */ jsxs5("div", { style: { background: "rgba(10,10,11,0.8)", backdropFilter: "blur(12px)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-3) var(--sp-5)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
1058
+ /* @__PURE__ */ jsxs5("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)", display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
1059
+ /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
1090
1060
  /* @__PURE__ */ jsx9("path", { d: "M4 18 L9 6 L14 18", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
1091
1061
  /* @__PURE__ */ jsx9("line", { x1: "6", y1: "14", x2: "12", y2: "14", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
1092
1062
  /* @__PURE__ */ jsx9("path", { d: "M16 10C16 8 17.5 7 19 7C20.5 7 22 8 22 10L22 12L19.5 12", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1095,15 +1065,15 @@ function ComponentsSection() {
1095
1065
  "Adarsh"
1096
1066
  ] }),
1097
1067
  /* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: "var(--sp-6)", listStyle: "none" }, children: ["Work", "Services", "Blog", "Contact"].map((link, i) => /* @__PURE__ */ jsx9("span", { style: { fontSize: "var(--brand-text-sm)", color: i === 0 ? "var(--accent-bright)" : "var(--text-secondary)", cursor: "pointer" }, children: link }, link)) }),
1098
- /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
1068
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
1099
1069
  /* @__PURE__ */ jsx9(ThemeToggle, {}),
1100
1070
  /* @__PURE__ */ jsx9("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Hire me" })
1101
1071
  ] })
1102
1072
  ] })
1103
1073
  ] }),
1104
- /* @__PURE__ */ jsxs6("div", { children: [
1074
+ /* @__PURE__ */ jsxs5("div", { children: [
1105
1075
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Tooltip" }),
1106
- /* @__PURE__ */ jsxs6(
1076
+ /* @__PURE__ */ jsxs5(
1107
1077
  "div",
1108
1078
  {
1109
1079
  style: { position: "relative", display: "inline-block" },
@@ -1116,7 +1086,7 @@ function ComponentsSection() {
1116
1086
  }
1117
1087
  )
1118
1088
  ] }),
1119
- /* @__PURE__ */ jsxs6("div", { children: [
1089
+ /* @__PURE__ */ jsxs5("div", { children: [
1120
1090
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Tags" }),
1121
1091
  /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-2)" }, children: ["typescript", "react", "node.js", "postgres", "redis", "docker"].map((tag) => /* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", background: "var(--bg-overlay)", border: "1px solid var(--border-subtle)", padding: "2px 8px", borderRadius: "var(--brand-radius-sm)", display: "inline-block" }, children: tag }, tag)) })
1122
1092
  ] })
@@ -1178,8 +1148,8 @@ function ThemePage({ version = package_default.version }) {
1178
1148
  lineHeight: 1.6,
1179
1149
  WebkitFontSmoothing: "antialiased",
1180
1150
  minHeight: "100vh"
1181
- }, children: /* @__PURE__ */ jsxs6("div", { style: { maxWidth: "var(--brand-layout-container-max)", margin: "0 auto", padding: "var(--sp-16) var(--sp-8)" }, children: [
1182
- /* @__PURE__ */ jsxs6("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
1151
+ }, children: /* @__PURE__ */ jsxs5("div", { style: { maxWidth: "var(--brand-layout-container-max)", margin: "0 auto", padding: "var(--sp-16) var(--sp-8)" }, children: [
1152
+ /* @__PURE__ */ jsxs5("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
1183
1153
  /* @__PURE__ */ jsx9("div", { style: {
1184
1154
  position: "absolute",
1185
1155
  top: -80,
@@ -1189,88 +1159,88 @@ function ThemePage({ version = package_default.version }) {
1189
1159
  background: "radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%)",
1190
1160
  pointerEvents: "none"
1191
1161
  } }),
1192
- /* @__PURE__ */ jsxs6("div", { style: { ...mono, fontSize: "var(--brand-text-xs)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "var(--sp-6)", display: "flex", alignItems: "center", gap: "var(--sp-3)", position: "relative" }, children: [
1162
+ /* @__PURE__ */ jsxs5("div", { style: { ...mono, fontSize: "var(--brand-text-xs)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "var(--sp-6)", display: "flex", alignItems: "center", gap: "var(--sp-3)", position: "relative" }, children: [
1193
1163
  /* @__PURE__ */ jsx9("span", { style: { width: 24, height: 1, background: "var(--border-mid)", display: "inline-block" } }),
1194
1164
  "@adarsh_goswami/brand",
1195
- version && /* @__PURE__ */ jsxs6("span", { style: { background: "var(--accent-subtle)", color: "var(--accent)", border: "1px solid var(--accent-border)", borderRadius: "var(--brand-radius-sm)", padding: "2px 8px", fontSize: 10 }, children: [
1165
+ version && /* @__PURE__ */ jsxs5("span", { style: { background: "var(--accent-subtle)", color: "var(--accent)", border: "1px solid var(--accent-border)", borderRadius: "var(--brand-radius-sm)", padding: "2px 8px", fontSize: 10 }, children: [
1196
1166
  "v",
1197
1167
  version
1198
1168
  ] })
1199
1169
  ] }),
1200
- /* @__PURE__ */ jsxs6("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "clamp(3rem, 8vw, 5rem)", fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.03em", marginBottom: "var(--sp-6)", position: "relative" }, children: [
1170
+ /* @__PURE__ */ jsxs5("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "clamp(3rem, 8vw, 5rem)", fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.03em", marginBottom: "var(--sp-6)", position: "relative" }, children: [
1201
1171
  /* @__PURE__ */ jsx9("span", { style: { color: "var(--text-primary)" }, children: "Design" }),
1202
1172
  /* @__PURE__ */ jsx9("br", {}),
1203
1173
  /* @__PURE__ */ jsx9("span", { style: { color: "var(--accent)" }, children: "System" })
1204
1174
  ] }),
1205
1175
  /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-md)", color: "var(--text-secondary)", fontWeight: 300, maxWidth: 420, lineHeight: 1.7, position: "relative" }, children: "The single source of truth for all brand decisions \u2014 colors, typography, spacing, and motion." }),
1206
- /* @__PURE__ */ jsx9("div", { style: { ...mono, marginTop: "var(--sp-10)", display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--sp-6)", fontSize: "var(--brand-text-xs)", color: "var(--text-muted)", letterSpacing: "0.06em", position: "relative" }, children: ["Radix UI", "Tailwind CSS", "TypeScript"].map((tech) => /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
1176
+ /* @__PURE__ */ jsx9("div", { style: { ...mono, marginTop: "var(--sp-10)", display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--sp-6)", fontSize: "var(--brand-text-xs)", color: "var(--text-muted)", letterSpacing: "0.06em", position: "relative" }, children: ["Radix UI", "Tailwind CSS", "TypeScript"].map((tech) => /* @__PURE__ */ jsxs5("span", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
1207
1177
  /* @__PURE__ */ jsx9("span", { style: dot }),
1208
1178
  tech
1209
1179
  ] }, tech)) })
1210
1180
  ] }),
1211
- /* @__PURE__ */ jsx9(Section, { label: "01 \u2014 Identity", title: "Logo & Mark", description: "The AG monogram is built from geometric forms \u2014 two interlocked letterforms on a contained grid.", first: true, children: /* @__PURE__ */ jsxs6("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: [
1212
- /* @__PURE__ */ jsxs6("div", { style: logoCardStyle("dark"), children: [
1181
+ /* @__PURE__ */ jsx9(Section, { label: "01 \u2014 Identity", title: "Logo & Mark", description: "The AG monogram is built from geometric forms \u2014 two interlocked letterforms on a contained grid.", first: true, children: /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: [
1182
+ /* @__PURE__ */ jsxs5("div", { style: logoCardStyle("dark"), children: [
1213
1183
  /* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "dark" }),
1214
1184
  /* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Primary \u2014 Dark" })
1215
1185
  ] }),
1216
- /* @__PURE__ */ jsxs6("div", { style: logoCardStyle("glow"), children: [
1186
+ /* @__PURE__ */ jsxs5("div", { style: logoCardStyle("glow"), children: [
1217
1187
  /* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "glow" }),
1218
1188
  /* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Glow Variant" })
1219
1189
  ] }),
1220
- /* @__PURE__ */ jsxs6("div", { style: logoCardStyle("light"), children: [
1190
+ /* @__PURE__ */ jsxs5("div", { style: logoCardStyle("light"), children: [
1221
1191
  /* @__PURE__ */ jsx9(AgMark, { size: 64, variant: "light" }),
1222
1192
  /* @__PURE__ */ jsx9("span", { style: logoLabelStyle("light"), children: "Light Variant" })
1223
1193
  ] }),
1224
- /* @__PURE__ */ jsxs6("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
1194
+ /* @__PURE__ */ jsxs5("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
1225
1195
  /* @__PURE__ */ jsx9(AgWordmark, {}),
1226
1196
  /* @__PURE__ */ jsx9("span", { style: logoLabelStyle("dark"), children: "Wordmark" })
1227
1197
  ] })
1228
1198
  ] }) }),
1229
- /* @__PURE__ */ jsxs6(Section, { label: "02 \u2014 Color", title: "Color System", description: "Dark-first palette anchored by a violet-indigo accent. All values resolve from theme.css.", children: [
1199
+ /* @__PURE__ */ jsxs5(Section, { label: "02 \u2014 Color", title: "Color System", description: "Dark-first palette anchored by a violet-indigo accent. All values resolve from theme.css.", children: [
1230
1200
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Accent" }),
1231
- /* @__PURE__ */ jsxs6(ColorGrid, { children: [
1201
+ /* @__PURE__ */ jsxs5(ColorGrid, { children: [
1232
1202
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-bright", label: "Bright", values: colorValues }),
1233
1203
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent", label: "Base", values: colorValues }),
1234
1204
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-dim", label: "Dim", values: colorValues }),
1235
1205
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--accent-glow", label: "Glow", values: colorValues })
1236
1206
  ] }),
1237
1207
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Backgrounds" }),
1238
- /* @__PURE__ */ jsxs6(ColorGrid, { children: [
1208
+ /* @__PURE__ */ jsxs5(ColorGrid, { children: [
1239
1209
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-base", label: "Base", values: colorValues }),
1240
1210
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-surface", label: "Surface", values: colorValues }),
1241
1211
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-raised", label: "Raised", values: colorValues }),
1242
1212
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--bg-overlay", label: "Overlay", values: colorValues })
1243
1213
  ] }),
1244
1214
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Borders" }),
1245
- /* @__PURE__ */ jsxs6(ColorGrid, { children: [
1215
+ /* @__PURE__ */ jsxs5(ColorGrid, { children: [
1246
1216
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-subtle", label: "Subtle", values: colorValues }),
1247
1217
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-soft", label: "Soft", values: colorValues }),
1248
1218
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--border-mid", label: "Mid", values: colorValues })
1249
1219
  ] }),
1250
1220
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Text" }),
1251
- /* @__PURE__ */ jsxs6(ColorGrid, { children: [
1221
+ /* @__PURE__ */ jsxs5(ColorGrid, { children: [
1252
1222
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-primary", label: "Primary", values: colorValues }),
1253
1223
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-secondary", label: "Secondary", values: colorValues }),
1254
1224
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-muted", label: "Muted", values: colorValues }),
1255
1225
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--text-disabled", label: "Disabled", values: colorValues })
1256
1226
  ] }),
1257
1227
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Semantic" }),
1258
- /* @__PURE__ */ jsxs6(ColorGrid, { children: [
1228
+ /* @__PURE__ */ jsxs5(ColorGrid, { children: [
1259
1229
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--success", label: "Success", values: colorValues }),
1260
1230
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--warning", label: "Warning", values: colorValues }),
1261
1231
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--error", label: "Error", values: colorValues }),
1262
1232
  /* @__PURE__ */ jsx9(ColorSwatch, { token: "--info", label: "Info", values: colorValues })
1263
1233
  ] })
1264
1234
  ] }),
1265
- /* @__PURE__ */ jsxs6(Section, { label: "03 \u2014 Typography", title: "Type System", description: "Syne for display and headings. DM Sans for body. DM Mono for code, labels, and data.", children: [
1235
+ /* @__PURE__ */ jsxs5(Section, { label: "03 \u2014 Typography", title: "Type System", description: "Syne for display and headings. DM Sans for body. DM Mono for code, labels, and data.", children: [
1266
1236
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Families" }),
1267
- /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", marginBottom: "var(--sp-8)" }, children: FONT_FAMILIES.map(({ token, cssFamily, weight, sample }) => /* @__PURE__ */ jsxs6("div", { style: { padding: "var(--sp-4) var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--sp-4)", flexWrap: "wrap" }, children: [
1237
+ /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", marginBottom: "var(--sp-8)" }, children: FONT_FAMILIES.map(({ token, cssFamily, weight, sample }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-4) var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--sp-4)", flexWrap: "wrap" }, children: [
1268
1238
  /* @__PURE__ */ jsx9("span", { style: { fontFamily: cssFamily, fontWeight: weight, fontSize: "var(--brand-text-lg)", color: "var(--text-primary)" }, children: sample }),
1269
1239
  /* @__PURE__ */ jsx9("span", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }, children: token })
1270
1240
  ] }, token)) }),
1271
1241
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Scale" }),
1272
- /* @__PURE__ */ jsx9("div", { children: TYPE_SCALE.map(({ token, label, role, weight, family }) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--sp-6)", padding: "var(--sp-5) 0", borderBottom: "1px solid var(--border-subtle)" }, children: [
1273
- /* @__PURE__ */ jsxs6("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
1242
+ /* @__PURE__ */ jsx9("div", { children: TYPE_SCALE.map(({ token, label, role, weight, family }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--sp-6)", padding: "var(--sp-5) 0", borderBottom: "1px solid var(--border-subtle)" }, children: [
1243
+ /* @__PURE__ */ jsxs5("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
1274
1244
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }, children: token }),
1275
1245
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: label }),
1276
1246
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: role })
@@ -1278,35 +1248,35 @@ function ThemePage({ version = package_default.version }) {
1278
1248
  /* @__PURE__ */ jsx9("div", { style: { fontFamily: fontFamilyVar(family), fontSize: `var(${token})`, fontWeight: weight, color: "var(--text-primary)", lineHeight: 1.2 }, children: TYPE_SPECIMENS[token] })
1279
1249
  ] }, token)) })
1280
1250
  ] }),
1281
- /* @__PURE__ */ jsx9(Section, { label: "04 \u2014 Spacing", title: "Spacing Scale", description: "8px base grid. All values are multiples of 4px for sub-grid alignment.", children: /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: SPACING.map(({ token, rem, px }) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-4)" }, children: [
1251
+ /* @__PURE__ */ jsx9(Section, { label: "04 \u2014 Spacing", title: "Spacing Scale", description: "8px base grid. All values are multiples of 4px for sub-grid alignment.", children: /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: SPACING.map(({ token, rem, px }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-4)" }, children: [
1282
1252
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 70 }, children: token }),
1283
1253
  /* @__PURE__ */ jsx9("div", { style: { flex: 1, height: 24, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9("div", { style: { height: 8, width: `var(${token})`, background: "var(--accent)", borderRadius: 2, opacity: 0.7 } }) }),
1284
1254
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-secondary)", minWidth: 50 }, children: rem }),
1285
1255
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 40 }, children: px })
1286
1256
  ] }, token)) }) }),
1287
- /* @__PURE__ */ jsx9(Section, { label: "05 \u2014 Shape", title: "Border Radius", description: "Consistent corner radii for a cohesive, modern feel across all components.", children: /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "var(--sp-4)" }, children: RADII.map(({ token, label, value }) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)" }, children: [
1257
+ /* @__PURE__ */ jsx9(Section, { label: "05 \u2014 Shape", title: "Border Radius", description: "Consistent corner radii for a cohesive, modern feel across all components.", children: /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "var(--sp-4)" }, children: RADII.map(({ token, label, value }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)" }, children: [
1288
1258
  /* @__PURE__ */ jsx9("div", { style: { width: 64, height: 64, background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: `var(${token})` } }),
1289
- /* @__PURE__ */ jsxs6("div", { style: { textAlign: "center" }, children: [
1259
+ /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center" }, children: [
1290
1260
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)" }, children: label }),
1291
1261
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: value })
1292
1262
  ] })
1293
1263
  ] }, token)) }) }),
1294
- /* @__PURE__ */ jsx9(Section, { label: "06 \u2014 Elevation", title: "Shadows", description: "Four shadow levels including an accent glow.", children: /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-6)" }, children: SHADOWS.map(({ token, label, desc }) => /* @__PURE__ */ jsxs6("div", { style: { padding: "var(--sp-8)", background: "var(--bg-surface)", borderRadius: "var(--brand-radius-lg)", boxShadow: `var(${token})` }, children: [
1264
+ /* @__PURE__ */ jsx9(Section, { label: "06 \u2014 Elevation", title: "Shadows", description: "Four shadow levels including an accent glow.", children: /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-6)" }, children: SHADOWS.map(({ token, label, desc }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-8)", background: "var(--bg-surface)", borderRadius: "var(--brand-radius-lg)", boxShadow: `var(${token})` }, children: [
1295
1265
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-1)" }, children: token }),
1296
1266
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-secondary)", marginBottom: "var(--sp-1)" }, children: label }),
1297
1267
  /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-muted)" }, children: desc })
1298
1268
  ] }, token)) }) }),
1299
1269
  /* @__PURE__ */ jsx9(Section, { label: "07 \u2014 Components", title: "UI Components", description: "Core interactive elements built from the token system above.", children: /* @__PURE__ */ jsx9(ComponentsSection, {}) }),
1300
- /* @__PURE__ */ jsxs6(Section, { label: "08 \u2014 Motion", title: "Animation Tokens", description: "Subtle, purposeful motion. Never decorative \u2014 always communicates state or hierarchy.", children: [
1270
+ /* @__PURE__ */ jsxs5(Section, { label: "08 \u2014 Motion", title: "Animation Tokens", description: "Subtle, purposeful motion. Never decorative \u2014 always communicates state or hierarchy.", children: [
1301
1271
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Easing" }),
1302
- /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)", marginBottom: "var(--sp-6)" }, children: EASINGS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs6("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
1272
+ /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)", marginBottom: "var(--sp-6)" }, children: EASINGS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
1303
1273
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
1304
1274
  /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)" }, children: label }),
1305
1275
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: value }),
1306
1276
  /* @__PURE__ */ jsx9("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
1307
1277
  ] }, token)) }),
1308
1278
  /* @__PURE__ */ jsx9(SectionLabel, { children: "Duration" }),
1309
- /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: DURATIONS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs6("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
1279
+ /* @__PURE__ */ jsx9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: DURATIONS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
1310
1280
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
1311
1281
  /* @__PURE__ */ jsx9("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-xl)", fontWeight: 700, color: "var(--text-primary)" }, children: value }),
1312
1282
  /* @__PURE__ */ jsx9("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: label }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adarsh_goswami/design",
3
- "version": "0.1.14-dev",
3
+ "version": "0.1.15-dev",
4
4
  "type": "module",
5
5
  "description": "Single source of truth for Adarsh Goswami's personal design system — pre-themed Radix UI components, CSS tokens, and Tailwind preset.",
6
6
  "author": "Adarsh Goswami",