@augmenting-integrations/ui 2.1.0 → 3.0.1
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/components/chrome/ThemeSwitcher.cjs +3 -4
- package/dist/components/chrome/ThemeSwitcher.cjs.map +1 -1
- package/dist/components/chrome/ThemeSwitcher.d.ts.map +1 -1
- package/dist/components/chrome/ThemeSwitcher.js +3 -4
- package/dist/components/chrome/ThemeSwitcher.js.map +1 -1
- package/dist/components/shells/AppShell.cjs +2 -3
- package/dist/components/shells/AppShell.cjs.map +1 -1
- package/dist/components/shells/AppShell.d.ts.map +1 -1
- package/dist/components/shells/AppShell.js +2 -3
- package/dist/components/shells/AppShell.js.map +1 -1
- package/dist/providers/ThemeProvider.cjs +8 -16
- package/dist/providers/ThemeProvider.cjs.map +1 -1
- package/dist/providers/ThemeProvider.d.ts +4 -1
- package/dist/providers/ThemeProvider.d.ts.map +1 -1
- package/dist/providers/ThemeProvider.js +8 -16
- package/dist/providers/ThemeProvider.js.map +1 -1
- package/package.json +5 -5
|
@@ -36,12 +36,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_next_themes = require("next-themes");
|
|
38
38
|
var import_lucide_react = require("lucide-react");
|
|
39
|
-
var import_themes = require("@augmenting-integrations/themes");
|
|
40
39
|
var import_ThemeProvider = require("../../providers/ThemeProvider.js");
|
|
41
40
|
var import_utils = require("../../lib/utils.js");
|
|
42
41
|
var import_dropdown_menu = require("../ui/dropdown-menu.js");
|
|
43
42
|
function ThemeSwitcher({ className }) {
|
|
44
|
-
const { themeName, setThemeName } = (0, import_ThemeProvider.useThemeName)();
|
|
43
|
+
const { themeName, setThemeName, themes } = (0, import_ThemeProvider.useThemeName)();
|
|
45
44
|
const { resolvedTheme, setTheme } = (0, import_next_themes.useTheme)();
|
|
46
45
|
const mounted = React.useSyncExternalStore(
|
|
47
46
|
() => () => {
|
|
@@ -61,7 +60,7 @@ function ThemeSwitcher({ className }) {
|
|
|
61
60
|
);
|
|
62
61
|
}
|
|
63
62
|
const isDark = resolvedTheme === "dark";
|
|
64
|
-
const activeLabel =
|
|
63
|
+
const activeLabel = themes.find((t) => t.id === themeName)?.label ?? "Theme";
|
|
65
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("flex items-center gap-2", className), children: [
|
|
66
65
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
66
|
"button",
|
|
@@ -85,7 +84,7 @@ function ThemeSwitcher({ className }) {
|
|
|
85
84
|
]
|
|
86
85
|
}
|
|
87
86
|
),
|
|
88
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-72 p-1", children:
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-72 p-1", children: themes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
89
88
|
import_dropdown_menu.DropdownMenuItem,
|
|
90
89
|
{
|
|
91
90
|
onClick: () => setThemeName(t.id),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/chrome/ThemeSwitcher.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useTheme } from \"next-themes\";\nimport { Moon, Sun, Palette } from \"lucide-react\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/chrome/ThemeSwitcher.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useTheme } from \"next-themes\";\nimport { Moon, Sun, Palette } from \"lucide-react\";\nimport { useThemeName } from \"../../providers/ThemeProvider.js\";\nimport { cn } from \"../../lib/utils.js\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"../ui/dropdown-menu.js\";\n\nexport function ThemeSwitcher({ className }: { className?: string }) {\n const { themeName, setThemeName, themes } = useThemeName();\n const { resolvedTheme, setTheme } = useTheme();\n const mounted = React.useSyncExternalStore(\n () => () => {},\n () => true,\n () => false,\n );\n\n if (!mounted) {\n return (\n <div\n className={cn(\n \"h-9 w-[120px] rounded-md border border-border bg-background\",\n className,\n )}\n />\n );\n }\n\n const isDark = resolvedTheme === \"dark\";\n const activeLabel = themes.find((t) => t.id === themeName)?.label ?? \"Theme\";\n\n return (\n <div className={cn(\"flex items-center gap-2\", className)}>\n <button\n type=\"button\"\n onClick={() => setTheme(isDark ? \"light\" : \"dark\")}\n aria-label={isDark ? \"Switch to light mode\" : \"Switch to dark mode\"}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-background text-foreground transition hover:bg-muted\"\n >\n {isDark ? <Sun className=\"h-4 w-4\" /> : <Moon className=\"h-4 w-4\" />}\n </button>\n\n <DropdownMenu>\n <DropdownMenuTrigger\n className=\"inline-flex h-9 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm text-foreground transition hover:bg-muted\"\n aria-label=\"Switch theme palette\"\n >\n <Palette className=\"h-4 w-4\" />\n <span className=\"font-medium\">{activeLabel}</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" sideOffset={6} className=\"w-72 p-1\">\n {themes.map((t) => (\n <DropdownMenuItem\n key={t.id}\n onClick={() => setThemeName(t.id)}\n className={cn(\n \"items-start gap-3 px-2 py-2\",\n themeName === t.id && \"bg-muted\",\n )}\n >\n <span\n aria-hidden\n className=\"mt-0.5 inline-flex h-6 w-6 shrink-0 overflow-hidden rounded-full ring-1 ring-border\"\n >\n <span className=\"h-full w-1/2\" style={{ background: t.swatch.primary }} />\n <span\n className=\"h-full w-1/2\"\n style={{ background: t.swatch.primaryDark }}\n />\n </span>\n <span className=\"flex flex-col\">\n <span className=\"text-sm font-medium\">{t.label}</span>\n <span className=\"text-xs text-muted-foreground\">{t.description}</span>\n </span>\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBM;AAvBN,YAAuB;AACvB,yBAAyB;AACzB,0BAAmC;AACnC,2BAA6B;AAC7B,mBAAmB;AACnB,2BAKO;AAEA,SAAS,cAAc,EAAE,UAAU,GAA2B;AACnE,QAAM,EAAE,WAAW,cAAc,OAAO,QAAI,mCAAa;AACzD,QAAM,EAAE,eAAe,SAAS,QAAI,6BAAS;AAC7C,QAAM,UAAU,MAAM;AAAA,IACpB,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,SAAS;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,SAAS,kBAAkB;AACjC,QAAM,cAAc,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,GAAG,SAAS;AAErE,SACE,6CAAC,SAAI,eAAW,iBAAG,2BAA2B,SAAS,GACrD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,SAAS,UAAU,MAAM;AAAA,QACjD,cAAY,SAAS,yBAAyB;AAAA,QAC9C,WAAU;AAAA,QAET,mBAAS,4CAAC,2BAAI,WAAU,WAAU,IAAK,4CAAC,4BAAK,WAAU,WAAU;AAAA;AAAA,IACpE;AAAA,IAEA,6CAAC,qCACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UAEX;AAAA,wDAAC,+BAAQ,WAAU,WAAU;AAAA,YAC7B,4CAAC,UAAK,WAAU,eAAe,uBAAY;AAAA;AAAA;AAAA,MAC7C;AAAA,MACA,4CAAC,4CAAoB,OAAM,OAAM,YAAY,GAAG,WAAU,YACvD,iBAAO,IAAI,CAAC,MACX;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM,aAAa,EAAE,EAAE;AAAA,UAChC,eAAW;AAAA,YACT;AAAA,YACA,cAAc,EAAE,MAAM;AAAA,UACxB;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBAEV;AAAA,8DAAC,UAAK,WAAU,gBAAe,OAAO,EAAE,YAAY,EAAE,OAAO,QAAQ,GAAG;AAAA,kBACxE;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,YAAY,EAAE,OAAO,YAAY;AAAA;AAAA,kBAC5C;AAAA;AAAA;AAAA,YACF;AAAA,YACA,6CAAC,UAAK,WAAU,iBACd;AAAA,0DAAC,UAAK,WAAU,uBAAuB,YAAE,OAAM;AAAA,cAC/C,4CAAC,UAAK,WAAU,iCAAiC,YAAE,aAAY;AAAA,eACjE;AAAA;AAAA;AAAA,QApBK,EAAE;AAAA,MAqBT,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/chrome/ThemeSwitcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/chrome/ThemeSwitcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAwElE"}
|
|
@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { useTheme } from "next-themes";
|
|
5
5
|
import { Moon, Sun, Palette } from "lucide-react";
|
|
6
|
-
import { BASE_THEMES } from "@augmenting-integrations/themes";
|
|
7
6
|
import { useThemeName } from "../../providers/ThemeProvider.js";
|
|
8
7
|
import { cn } from "../../lib/utils.js";
|
|
9
8
|
import {
|
|
@@ -13,7 +12,7 @@ import {
|
|
|
13
12
|
DropdownMenuTrigger
|
|
14
13
|
} from "../ui/dropdown-menu.js";
|
|
15
14
|
function ThemeSwitcher({ className }) {
|
|
16
|
-
const { themeName, setThemeName } = useThemeName();
|
|
15
|
+
const { themeName, setThemeName, themes } = useThemeName();
|
|
17
16
|
const { resolvedTheme, setTheme } = useTheme();
|
|
18
17
|
const mounted = React.useSyncExternalStore(
|
|
19
18
|
() => () => {
|
|
@@ -33,7 +32,7 @@ function ThemeSwitcher({ className }) {
|
|
|
33
32
|
);
|
|
34
33
|
}
|
|
35
34
|
const isDark = resolvedTheme === "dark";
|
|
36
|
-
const activeLabel =
|
|
35
|
+
const activeLabel = themes.find((t) => t.id === themeName)?.label ?? "Theme";
|
|
37
36
|
return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
|
|
38
37
|
/* @__PURE__ */ jsx(
|
|
39
38
|
"button",
|
|
@@ -57,7 +56,7 @@ function ThemeSwitcher({ className }) {
|
|
|
57
56
|
]
|
|
58
57
|
}
|
|
59
58
|
),
|
|
60
|
-
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-72 p-1", children:
|
|
59
|
+
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-72 p-1", children: themes.map((t) => /* @__PURE__ */ jsxs(
|
|
61
60
|
DropdownMenuItem,
|
|
62
61
|
{
|
|
63
62
|
onClick: () => setThemeName(t.id),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/chrome/ThemeSwitcher.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useTheme } from \"next-themes\";\nimport { Moon, Sun, Palette } from \"lucide-react\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/chrome/ThemeSwitcher.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useTheme } from \"next-themes\";\nimport { Moon, Sun, Palette } from \"lucide-react\";\nimport { useThemeName } from \"../../providers/ThemeProvider.js\";\nimport { cn } from \"../../lib/utils.js\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"../ui/dropdown-menu.js\";\n\nexport function ThemeSwitcher({ className }: { className?: string }) {\n const { themeName, setThemeName, themes } = useThemeName();\n const { resolvedTheme, setTheme } = useTheme();\n const mounted = React.useSyncExternalStore(\n () => () => {},\n () => true,\n () => false,\n );\n\n if (!mounted) {\n return (\n <div\n className={cn(\n \"h-9 w-[120px] rounded-md border border-border bg-background\",\n className,\n )}\n />\n );\n }\n\n const isDark = resolvedTheme === \"dark\";\n const activeLabel = themes.find((t) => t.id === themeName)?.label ?? \"Theme\";\n\n return (\n <div className={cn(\"flex items-center gap-2\", className)}>\n <button\n type=\"button\"\n onClick={() => setTheme(isDark ? \"light\" : \"dark\")}\n aria-label={isDark ? \"Switch to light mode\" : \"Switch to dark mode\"}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-background text-foreground transition hover:bg-muted\"\n >\n {isDark ? <Sun className=\"h-4 w-4\" /> : <Moon className=\"h-4 w-4\" />}\n </button>\n\n <DropdownMenu>\n <DropdownMenuTrigger\n className=\"inline-flex h-9 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm text-foreground transition hover:bg-muted\"\n aria-label=\"Switch theme palette\"\n >\n <Palette className=\"h-4 w-4\" />\n <span className=\"font-medium\">{activeLabel}</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" sideOffset={6} className=\"w-72 p-1\">\n {themes.map((t) => (\n <DropdownMenuItem\n key={t.id}\n onClick={() => setThemeName(t.id)}\n className={cn(\n \"items-start gap-3 px-2 py-2\",\n themeName === t.id && \"bg-muted\",\n )}\n >\n <span\n aria-hidden\n className=\"mt-0.5 inline-flex h-6 w-6 shrink-0 overflow-hidden rounded-full ring-1 ring-border\"\n >\n <span className=\"h-full w-1/2\" style={{ background: t.swatch.primary }} />\n <span\n className=\"h-full w-1/2\"\n style={{ background: t.swatch.primaryDark }}\n />\n </span>\n <span className=\"flex flex-col\">\n <span className=\"text-sm font-medium\">{t.label}</span>\n <span className=\"text-xs text-muted-foreground\">{t.description}</span>\n </span>\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n );\n}\n"],"mappings":";AAyBM,cAwBE,YAxBF;AAvBN,YAAY,WAAW;AACvB,SAAS,gBAAgB;AACzB,SAAS,MAAM,KAAK,eAAe;AACnC,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc,EAAE,UAAU,GAA2B;AACnE,QAAM,EAAE,WAAW,cAAc,OAAO,IAAI,aAAa;AACzD,QAAM,EAAE,eAAe,SAAS,IAAI,SAAS;AAC7C,QAAM,UAAU,MAAM;AAAA,IACpB,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,SAAS;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,SAAS,kBAAkB;AACjC,QAAM,cAAc,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,GAAG,SAAS;AAErE,SACE,qBAAC,SAAI,WAAW,GAAG,2BAA2B,SAAS,GACrD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,SAAS,UAAU,MAAM;AAAA,QACjD,cAAY,SAAS,yBAAyB;AAAA,QAC9C,WAAU;AAAA,QAET,mBAAS,oBAAC,OAAI,WAAU,WAAU,IAAK,oBAAC,QAAK,WAAU,WAAU;AAAA;AAAA,IACpE;AAAA,IAEA,qBAAC,gBACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UAEX;AAAA,gCAAC,WAAQ,WAAU,WAAU;AAAA,YAC7B,oBAAC,UAAK,WAAU,eAAe,uBAAY;AAAA;AAAA;AAAA,MAC7C;AAAA,MACA,oBAAC,uBAAoB,OAAM,OAAM,YAAY,GAAG,WAAU,YACvD,iBAAO,IAAI,CAAC,MACX;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM,aAAa,EAAE,EAAE;AAAA,UAChC,WAAW;AAAA,YACT;AAAA,YACA,cAAc,EAAE,MAAM;AAAA,UACxB;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBAEV;AAAA,sCAAC,UAAK,WAAU,gBAAe,OAAO,EAAE,YAAY,EAAE,OAAO,QAAQ,GAAG;AAAA,kBACxE;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,YAAY,EAAE,OAAO,YAAY;AAAA;AAAA,kBAC5C;AAAA;AAAA;AAAA,YACF;AAAA,YACA,qBAAC,UAAK,WAAU,iBACd;AAAA,kCAAC,UAAK,WAAU,uBAAuB,YAAE,OAAM;AAAA,cAC/C,oBAAC,UAAK,WAAU,iCAAiC,YAAE,aAAY;AAAA,eACjE;AAAA;AAAA;AAAA,QApBK,EAAE;AAAA,MAqBT,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -34,7 +34,6 @@ __export(AppShell_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(AppShell_exports);
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
|
-
var import_link = __toESM(require("next/link"));
|
|
38
37
|
var import_lucide_react = require("lucide-react");
|
|
39
38
|
var import_Logo = require("../chrome/Logo.js");
|
|
40
39
|
var import_ThemeSwitcher = require("../chrome/ThemeSwitcher.js");
|
|
@@ -47,7 +46,7 @@ function NavGroup({ group, pathname }) {
|
|
|
47
46
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-0.5", children: group.items.map((item) => {
|
|
48
47
|
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
49
48
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
50
|
-
|
|
49
|
+
"a",
|
|
51
50
|
{
|
|
52
51
|
href: item.href,
|
|
53
52
|
className: (0, import_utils.cn)(
|
|
@@ -72,7 +71,7 @@ function AppShell({
|
|
|
72
71
|
}) {
|
|
73
72
|
const [mobileOpen, setMobileOpen] = React.useState(false);
|
|
74
73
|
const sidebarContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full flex-col gap-6 px-3 py-4", children: [
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: homeHref, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Logo.Logo, {}) }),
|
|
76
75
|
navGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavGroup, { group: g, pathname }, g.label))
|
|
77
76
|
] });
|
|
78
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-h-svh bg-background text-foreground", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/shells/AppShell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../../src/components/shells/AppShell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Menu, X } from \"lucide-react\";\nimport { Logo } from \"../chrome/Logo.js\";\nimport { ThemeSwitcher } from \"../chrome/ThemeSwitcher.js\";\nimport { RoleSwitcher } from \"../chrome/RoleSwitcher.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n// Nav uses raw `<a>` not `next/link`. Consumers may set Next.js `basePath`\n// (e.g. /commissions in a path-routed product app), and `<Link>` would\n// silently prepend that prefix to every cross-app href, sending users to\n// /commissions/dashboard etc. — which 404s. Raw `<a>` honors the literal\n// href. We lose prefetch for AppShell links, but cross-app navigation\n// crosses Lambda origins anyway, so prefetch wouldn't help.\n\nexport type AppNavItem = {\n href: string;\n label: string;\n icon: React.ComponentType<{ className?: string }>;\n /** When provided, item only renders if the consumer's `getFlag(flag)` returns true. */\n flag?: string;\n};\n\nexport type AppNavGroup = { label: string; items: AppNavItem[] };\n\nfunction NavGroup({ group, pathname }: { group: AppNavGroup; pathname: string }) {\n if (group.items.length === 0) return null;\n return (\n <div className=\"space-y-1\">\n <p className=\"px-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n {group.label}\n </p>\n <ul className=\"space-y-0.5\">\n {group.items.map((item) => {\n const active = pathname === item.href || pathname.startsWith(`${item.href}/`);\n return (\n <li key={item.href}>\n <a\n href={item.href}\n className={cn(\n \"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition\",\n active\n ? \"bg-sidebar-accent text-sidebar-accent-foreground\"\n : \"text-sidebar-foreground hover:bg-sidebar-accent/60\",\n )}\n >\n <item.icon className=\"h-4 w-4 shrink-0\" />\n <span>{item.label}</span>\n </a>\n </li>\n );\n })}\n </ul>\n </div>\n );\n}\n\nexport function AppShell({\n children,\n pathname,\n navGroups,\n homeHref = \"/\",\n showRoleSwitcher = true,\n}: {\n children: React.ReactNode;\n pathname: string;\n navGroups: AppNavGroup[];\n homeHref?: string;\n showRoleSwitcher?: boolean;\n}) {\n const [mobileOpen, setMobileOpen] = React.useState(false);\n\n const sidebarContent = (\n <div className=\"flex h-full flex-col gap-6 px-3 py-4\">\n <a href={homeHref} className=\"px-2\" aria-label=\"Home\">\n <Logo />\n </a>\n {navGroups.map((g) => (\n <NavGroup key={g.label} group={g} pathname={pathname} />\n ))}\n </div>\n );\n\n return (\n <div className=\"flex min-h-svh bg-background text-foreground\">\n <aside className=\"hidden w-64 shrink-0 border-r border-sidebar-border bg-sidebar text-sidebar-foreground md:block\">\n {sidebarContent}\n </aside>\n\n {mobileOpen ? (\n <div className=\"fixed inset-0 z-50 flex md:hidden\">\n <div\n className=\"flex-1 bg-foreground/40 backdrop-blur-sm\"\n onClick={() => setMobileOpen(false)}\n aria-hidden\n />\n <aside className=\"relative w-72 border-l border-sidebar-border bg-sidebar text-sidebar-foreground\">\n <button\n type=\"button\"\n onClick={() => setMobileOpen(false)}\n aria-label=\"Close menu\"\n className=\"absolute right-2 top-2 inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-sidebar-accent\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n {sidebarContent}\n </aside>\n </div>\n ) : null}\n\n <div className=\"flex min-w-0 flex-1 flex-col\">\n <header className=\"flex h-14 items-center justify-between gap-3 border-b border-border bg-background/80 px-4 backdrop-blur md:px-6\">\n <button\n type=\"button\"\n onClick={() => setMobileOpen(true)}\n aria-label=\"Open menu\"\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md border border-border md:hidden\"\n >\n <Menu className=\"h-4 w-4\" />\n </button>\n <div className=\"flex items-center gap-3 md:ml-auto\">\n {showRoleSwitcher ? <RoleSwitcher /> : null}\n <ThemeSwitcher />\n </div>\n </header>\n <main className=\"min-w-0 flex-1 px-4 py-6 md:px-8 md:py-8\">{children}</main>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BM;AA5BN,YAAuB;AACvB,0BAAwB;AACxB,kBAAqB;AACrB,2BAA8B;AAC9B,0BAA6B;AAC7B,mBAAmB;AAmBnB,SAAS,SAAS,EAAE,OAAO,SAAS,GAA6C;AAC/E,MAAI,MAAM,MAAM,WAAW,EAAG,QAAO;AACrC,SACE,6CAAC,SAAI,WAAU,aACb;AAAA,gDAAC,OAAE,WAAU,4EACV,gBAAM,OACT;AAAA,IACA,4CAAC,QAAG,WAAU,eACX,gBAAM,MAAM,IAAI,CAAC,SAAS;AACzB,YAAM,SAAS,aAAa,KAAK,QAAQ,SAAS,WAAW,GAAG,KAAK,IAAI,GAAG;AAC5E,aACE,4CAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,SACI,qDACA;AAAA,UACN;AAAA,UAEA;AAAA,wDAAC,KAAK,MAAL,EAAU,WAAU,oBAAmB;AAAA,YACxC,4CAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,MACpB,KAZO,KAAK,IAad;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AACrB,GAMG;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAExD,QAAM,iBACJ,6CAAC,SAAI,WAAU,wCACb;AAAA,gDAAC,OAAE,MAAM,UAAU,WAAU,QAAO,cAAW,QAC7C,sDAAC,oBAAK,GACR;AAAA,IACC,UAAU,IAAI,CAAC,MACd,4CAAC,YAAuB,OAAO,GAAG,YAAnB,EAAE,KAAqC,CACvD;AAAA,KACH;AAGF,SACE,6CAAC,SAAI,WAAU,gDACb;AAAA,gDAAC,WAAM,WAAU,mGACd,0BACH;AAAA,IAEC,aACC,6CAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM,cAAc,KAAK;AAAA,UAClC,eAAW;AAAA;AAAA,MACb;AAAA,MACA,6CAAC,WAAM,WAAU,mFACf;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,cAAc,KAAK;AAAA,YAClC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,sDAAC,yBAAE,WAAU,WAAU;AAAA;AAAA,QACzB;AAAA,QACC;AAAA,SACH;AAAA,OACF,IACE;AAAA,IAEJ,6CAAC,SAAI,WAAU,gCACb;AAAA,mDAAC,YAAO,WAAU,mHAChB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,cAAc,IAAI;AAAA,YACjC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,sDAAC,4BAAK,WAAU,WAAU;AAAA;AAAA,QAC5B;AAAA,QACA,6CAAC,SAAI,WAAU,sCACZ;AAAA,6BAAmB,4CAAC,oCAAa,IAAK;AAAA,UACvC,4CAAC,sCAAc;AAAA,WACjB;AAAA,SACF;AAAA,MACA,4CAAC,UAAK,WAAU,4CAA4C,UAAS;AAAA,OACvE;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/shells/AppShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/shells/AppShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,EAAE,CAAA;CAAE,CAAC;AAkCjE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAc,EACd,gBAAuB,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,qBA4DA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import Link from "next/link";
|
|
5
4
|
import { Menu, X } from "lucide-react";
|
|
6
5
|
import { Logo } from "../chrome/Logo.js";
|
|
7
6
|
import { ThemeSwitcher } from "../chrome/ThemeSwitcher.js";
|
|
@@ -14,7 +13,7 @@ function NavGroup({ group, pathname }) {
|
|
|
14
13
|
/* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: group.items.map((item) => {
|
|
15
14
|
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
16
15
|
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
|
|
17
|
-
|
|
16
|
+
"a",
|
|
18
17
|
{
|
|
19
18
|
href: item.href,
|
|
20
19
|
className: cn(
|
|
@@ -39,7 +38,7 @@ function AppShell({
|
|
|
39
38
|
}) {
|
|
40
39
|
const [mobileOpen, setMobileOpen] = React.useState(false);
|
|
41
40
|
const sidebarContent = /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-6 px-3 py-4", children: [
|
|
42
|
-
/* @__PURE__ */ jsx(
|
|
41
|
+
/* @__PURE__ */ jsx("a", { href: homeHref, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsx(Logo, {}) }),
|
|
43
42
|
navGroups.map((g) => /* @__PURE__ */ jsx(NavGroup, { group: g, pathname }, g.label))
|
|
44
43
|
] });
|
|
45
44
|
return /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh bg-background text-foreground", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/shells/AppShell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../../src/components/shells/AppShell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Menu, X } from \"lucide-react\";\nimport { Logo } from \"../chrome/Logo.js\";\nimport { ThemeSwitcher } from \"../chrome/ThemeSwitcher.js\";\nimport { RoleSwitcher } from \"../chrome/RoleSwitcher.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n// Nav uses raw `<a>` not `next/link`. Consumers may set Next.js `basePath`\n// (e.g. /commissions in a path-routed product app), and `<Link>` would\n// silently prepend that prefix to every cross-app href, sending users to\n// /commissions/dashboard etc. — which 404s. Raw `<a>` honors the literal\n// href. We lose prefetch for AppShell links, but cross-app navigation\n// crosses Lambda origins anyway, so prefetch wouldn't help.\n\nexport type AppNavItem = {\n href: string;\n label: string;\n icon: React.ComponentType<{ className?: string }>;\n /** When provided, item only renders if the consumer's `getFlag(flag)` returns true. */\n flag?: string;\n};\n\nexport type AppNavGroup = { label: string; items: AppNavItem[] };\n\nfunction NavGroup({ group, pathname }: { group: AppNavGroup; pathname: string }) {\n if (group.items.length === 0) return null;\n return (\n <div className=\"space-y-1\">\n <p className=\"px-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n {group.label}\n </p>\n <ul className=\"space-y-0.5\">\n {group.items.map((item) => {\n const active = pathname === item.href || pathname.startsWith(`${item.href}/`);\n return (\n <li key={item.href}>\n <a\n href={item.href}\n className={cn(\n \"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition\",\n active\n ? \"bg-sidebar-accent text-sidebar-accent-foreground\"\n : \"text-sidebar-foreground hover:bg-sidebar-accent/60\",\n )}\n >\n <item.icon className=\"h-4 w-4 shrink-0\" />\n <span>{item.label}</span>\n </a>\n </li>\n );\n })}\n </ul>\n </div>\n );\n}\n\nexport function AppShell({\n children,\n pathname,\n navGroups,\n homeHref = \"/\",\n showRoleSwitcher = true,\n}: {\n children: React.ReactNode;\n pathname: string;\n navGroups: AppNavGroup[];\n homeHref?: string;\n showRoleSwitcher?: boolean;\n}) {\n const [mobileOpen, setMobileOpen] = React.useState(false);\n\n const sidebarContent = (\n <div className=\"flex h-full flex-col gap-6 px-3 py-4\">\n <a href={homeHref} className=\"px-2\" aria-label=\"Home\">\n <Logo />\n </a>\n {navGroups.map((g) => (\n <NavGroup key={g.label} group={g} pathname={pathname} />\n ))}\n </div>\n );\n\n return (\n <div className=\"flex min-h-svh bg-background text-foreground\">\n <aside className=\"hidden w-64 shrink-0 border-r border-sidebar-border bg-sidebar text-sidebar-foreground md:block\">\n {sidebarContent}\n </aside>\n\n {mobileOpen ? (\n <div className=\"fixed inset-0 z-50 flex md:hidden\">\n <div\n className=\"flex-1 bg-foreground/40 backdrop-blur-sm\"\n onClick={() => setMobileOpen(false)}\n aria-hidden\n />\n <aside className=\"relative w-72 border-l border-sidebar-border bg-sidebar text-sidebar-foreground\">\n <button\n type=\"button\"\n onClick={() => setMobileOpen(false)}\n aria-label=\"Close menu\"\n className=\"absolute right-2 top-2 inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-sidebar-accent\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n {sidebarContent}\n </aside>\n </div>\n ) : null}\n\n <div className=\"flex min-w-0 flex-1 flex-col\">\n <header className=\"flex h-14 items-center justify-between gap-3 border-b border-border bg-background/80 px-4 backdrop-blur md:px-6\">\n <button\n type=\"button\"\n onClick={() => setMobileOpen(true)}\n aria-label=\"Open menu\"\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md border border-border md:hidden\"\n >\n <Menu className=\"h-4 w-4\" />\n </button>\n <div className=\"flex items-center gap-3 md:ml-auto\">\n {showRoleSwitcher ? <RoleSwitcher /> : null}\n <ThemeSwitcher />\n </div>\n </header>\n <main className=\"min-w-0 flex-1 px-4 py-6 md:px-8 md:py-8\">{children}</main>\n </div>\n </div>\n );\n}\n"],"mappings":";AA8BM,cAQQ,YARR;AA5BN,YAAY,WAAW;AACvB,SAAS,MAAM,SAAS;AACxB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AAmBnB,SAAS,SAAS,EAAE,OAAO,SAAS,GAA6C;AAC/E,MAAI,MAAM,MAAM,WAAW,EAAG,QAAO;AACrC,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,OAAE,WAAU,4EACV,gBAAM,OACT;AAAA,IACA,oBAAC,QAAG,WAAU,eACX,gBAAM,MAAM,IAAI,CAAC,SAAS;AACzB,YAAM,SAAS,aAAa,KAAK,QAAQ,SAAS,WAAW,GAAG,KAAK,IAAI,GAAG;AAC5E,aACE,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,SACI,qDACA;AAAA,UACN;AAAA,UAEA;AAAA,gCAAC,KAAK,MAAL,EAAU,WAAU,oBAAmB;AAAA,YACxC,oBAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,MACpB,KAZO,KAAK,IAad;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AACrB,GAMG;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAExD,QAAM,iBACJ,qBAAC,SAAI,WAAU,wCACb;AAAA,wBAAC,OAAE,MAAM,UAAU,WAAU,QAAO,cAAW,QAC7C,8BAAC,QAAK,GACR;AAAA,IACC,UAAU,IAAI,CAAC,MACd,oBAAC,YAAuB,OAAO,GAAG,YAAnB,EAAE,KAAqC,CACvD;AAAA,KACH;AAGF,SACE,qBAAC,SAAI,WAAU,gDACb;AAAA,wBAAC,WAAM,WAAU,mGACd,0BACH;AAAA,IAEC,aACC,qBAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM,cAAc,KAAK;AAAA,UAClC,eAAW;AAAA;AAAA,MACb;AAAA,MACA,qBAAC,WAAM,WAAU,mFACf;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,cAAc,KAAK;AAAA,YAClC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,QACzB;AAAA,QACC;AAAA,SACH;AAAA,OACF,IACE;AAAA,IAEJ,qBAAC,SAAI,WAAU,gCACb;AAAA,2BAAC,YAAO,WAAU,mHAChB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,cAAc,IAAI;AAAA,YACjC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,QAAK,WAAU,WAAU;AAAA;AAAA,QAC5B;AAAA,QACA,qBAAC,SAAI,WAAU,sCACZ;AAAA,6BAAmB,oBAAC,gBAAa,IAAK;AAAA,UACvC,oBAAC,iBAAc;AAAA,WACjB;AAAA,SACF;AAAA,MACA,oBAAC,UAAK,WAAU,4CAA4C,UAAS;AAAA,OACvE;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -38,13 +38,6 @@ var React = __toESM(require("react"));
|
|
|
38
38
|
var import_next_themes = require("next-themes");
|
|
39
39
|
var import_themes = require("@augmenting-integrations/themes");
|
|
40
40
|
const ThemeNameContext = React.createContext(null);
|
|
41
|
-
function readCookie() {
|
|
42
|
-
if (typeof document === "undefined") return null;
|
|
43
|
-
const match = document.cookie.split("; ").find((row) => row.startsWith(`${import_themes.THEME_COOKIE_KEY}=`));
|
|
44
|
-
if (!match) return null;
|
|
45
|
-
const value = match.split("=")[1];
|
|
46
|
-
return value && value.length > 0 ? value : null;
|
|
47
|
-
}
|
|
48
41
|
function writeCookie(value) {
|
|
49
42
|
if (typeof document === "undefined") return;
|
|
50
43
|
document.cookie = `${import_themes.THEME_COOKIE_KEY}=${value}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`;
|
|
@@ -52,21 +45,20 @@ function writeCookie(value) {
|
|
|
52
45
|
function ThemeProvider({
|
|
53
46
|
children,
|
|
54
47
|
defaultTheme,
|
|
55
|
-
defaultVariant
|
|
48
|
+
defaultVariant,
|
|
49
|
+
themes
|
|
56
50
|
}) {
|
|
57
|
-
const [themeName, setThemeNameState] = React.useState(
|
|
58
|
-
() => readCookie() ?? defaultTheme
|
|
59
|
-
);
|
|
60
|
-
React.useEffect(() => {
|
|
61
|
-
document.documentElement.setAttribute("data-theme", themeName);
|
|
62
|
-
}, [themeName]);
|
|
51
|
+
const [themeName, setThemeNameState] = React.useState(defaultTheme);
|
|
63
52
|
const setThemeName = React.useCallback((next) => {
|
|
53
|
+
if (typeof document !== "undefined") {
|
|
54
|
+
document.documentElement.setAttribute("data-theme", next);
|
|
55
|
+
}
|
|
64
56
|
writeCookie(next);
|
|
65
57
|
setThemeNameState(next);
|
|
66
58
|
}, []);
|
|
67
59
|
const value = React.useMemo(
|
|
68
|
-
() => ({ themeName, setThemeName }),
|
|
69
|
-
[themeName, setThemeName]
|
|
60
|
+
() => ({ themeName, setThemeName, themes }),
|
|
61
|
+
[themeName, setThemeName, themes]
|
|
70
62
|
);
|
|
71
63
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeNameContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
72
64
|
import_next_themes.ThemeProvider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/providers/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type { ThemeName, Variant } from \"@augmenting-integrations/brand\";\nimport { THEME_COOKIE_KEY } from \"@augmenting-integrations/themes\";\n\ntype ThemeContextValue = {\n themeName: ThemeName;\n setThemeName: (next: ThemeName) => void;\n};\n\nconst ThemeNameContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction
|
|
1
|
+
{"version":3,"sources":["../../src/providers/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type { ThemeName, Variant } from \"@augmenting-integrations/brand\";\nimport { THEME_COOKIE_KEY, type ThemeMeta } from \"@augmenting-integrations/themes\";\n\ntype ThemeContextValue = {\n themeName: ThemeName;\n setThemeName: (next: ThemeName) => void;\n themes: ThemeMeta[];\n};\n\nconst ThemeNameContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction writeCookie(value: ThemeName) {\n if (typeof document === \"undefined\") return;\n document.cookie = `${THEME_COOKIE_KEY}=${value}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`;\n}\n\nexport function ThemeProvider({\n children,\n defaultTheme,\n defaultVariant,\n themes,\n}: {\n children: React.ReactNode;\n defaultTheme: ThemeName;\n defaultVariant: Variant;\n themes: ThemeMeta[];\n}) {\n const [themeName, setThemeNameState] = React.useState<ThemeName>(defaultTheme);\n\n const setThemeName = React.useCallback((next: ThemeName) => {\n if (typeof document !== \"undefined\") {\n document.documentElement.setAttribute(\"data-theme\", next);\n }\n writeCookie(next);\n setThemeNameState(next);\n }, []);\n\n const value = React.useMemo(\n () => ({ themeName, setThemeName, themes }),\n [themeName, setThemeName, themes],\n );\n\n return (\n <ThemeNameContext.Provider value={value}>\n <NextThemesProvider\n attribute=\"class\"\n defaultTheme={defaultVariant}\n enableSystem={false}\n disableTransitionOnChange\n >\n {children}\n </NextThemesProvider>\n </ThemeNameContext.Provider>\n );\n}\n\nexport function useThemeName() {\n const ctx = React.useContext(ThemeNameContext);\n if (!ctx) throw new Error(\"useThemeName must be used inside <ThemeProvider />\");\n return ctx;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDM;AA9CN,YAAuB;AACvB,yBAAoD;AAEpD,oBAAiD;AAQjD,MAAM,mBAAmB,MAAM,cAAwC,IAAI;AAE3E,SAAS,YAAY,OAAkB;AACrC,MAAI,OAAO,aAAa,YAAa;AACrC,WAAS,SAAS,GAAG,8BAAgB,IAAI,KAAK,qBAAqB,KAAK,KAAK,KAAK,GAAG;AACvF;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,WAAW,iBAAiB,IAAI,MAAM,SAAoB,YAAY;AAE7E,QAAM,eAAe,MAAM,YAAY,CAAC,SAAoB;AAC1D,QAAI,OAAO,aAAa,aAAa;AACnC,eAAS,gBAAgB,aAAa,cAAc,IAAI;AAAA,IAC1D;AACA,gBAAY,IAAI;AAChB,sBAAkB,IAAI;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,WAAW,cAAc,OAAO;AAAA,IACzC,CAAC,WAAW,cAAc,MAAM;AAAA,EAClC;AAEA,SACE,4CAAC,iBAAiB,UAAjB,EAA0B,OACzB;AAAA,IAAC,mBAAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAc;AAAA,MACd,cAAc;AAAA,MACd,2BAAyB;AAAA,MAExB;AAAA;AAAA,EACH,GACF;AAEJ;AAEO,SAAS,eAAe;AAC7B,QAAM,MAAM,MAAM,WAAW,gBAAgB;AAC7C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAO;AACT;","names":["NextThemesProvider"]}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ThemeName, Variant } from "@augmenting-integrations/brand";
|
|
3
|
+
import { type ThemeMeta } from "@augmenting-integrations/themes";
|
|
3
4
|
type ThemeContextValue = {
|
|
4
5
|
themeName: ThemeName;
|
|
5
6
|
setThemeName: (next: ThemeName) => void;
|
|
7
|
+
themes: ThemeMeta[];
|
|
6
8
|
};
|
|
7
|
-
export declare function ThemeProvider({ children, defaultTheme, defaultVariant, }: {
|
|
9
|
+
export declare function ThemeProvider({ children, defaultTheme, defaultVariant, themes, }: {
|
|
8
10
|
children: React.ReactNode;
|
|
9
11
|
defaultTheme: ThemeName;
|
|
10
12
|
defaultVariant: Variant;
|
|
13
|
+
themes: ThemeMeta[];
|
|
11
14
|
}): React.JSX.Element;
|
|
12
15
|
export declare function useThemeName(): ThemeContextValue;
|
|
13
16
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEnF,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AASF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,SAAS,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB,qBA4BA;AAED,wBAAgB,YAAY,sBAI3B"}
|
|
@@ -4,13 +4,6 @@ import * as React from "react";
|
|
|
4
4
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
|
5
5
|
import { THEME_COOKIE_KEY } from "@augmenting-integrations/themes";
|
|
6
6
|
const ThemeNameContext = React.createContext(null);
|
|
7
|
-
function readCookie() {
|
|
8
|
-
if (typeof document === "undefined") return null;
|
|
9
|
-
const match = document.cookie.split("; ").find((row) => row.startsWith(`${THEME_COOKIE_KEY}=`));
|
|
10
|
-
if (!match) return null;
|
|
11
|
-
const value = match.split("=")[1];
|
|
12
|
-
return value && value.length > 0 ? value : null;
|
|
13
|
-
}
|
|
14
7
|
function writeCookie(value) {
|
|
15
8
|
if (typeof document === "undefined") return;
|
|
16
9
|
document.cookie = `${THEME_COOKIE_KEY}=${value}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`;
|
|
@@ -18,21 +11,20 @@ function writeCookie(value) {
|
|
|
18
11
|
function ThemeProvider({
|
|
19
12
|
children,
|
|
20
13
|
defaultTheme,
|
|
21
|
-
defaultVariant
|
|
14
|
+
defaultVariant,
|
|
15
|
+
themes
|
|
22
16
|
}) {
|
|
23
|
-
const [themeName, setThemeNameState] = React.useState(
|
|
24
|
-
() => readCookie() ?? defaultTheme
|
|
25
|
-
);
|
|
26
|
-
React.useEffect(() => {
|
|
27
|
-
document.documentElement.setAttribute("data-theme", themeName);
|
|
28
|
-
}, [themeName]);
|
|
17
|
+
const [themeName, setThemeNameState] = React.useState(defaultTheme);
|
|
29
18
|
const setThemeName = React.useCallback((next) => {
|
|
19
|
+
if (typeof document !== "undefined") {
|
|
20
|
+
document.documentElement.setAttribute("data-theme", next);
|
|
21
|
+
}
|
|
30
22
|
writeCookie(next);
|
|
31
23
|
setThemeNameState(next);
|
|
32
24
|
}, []);
|
|
33
25
|
const value = React.useMemo(
|
|
34
|
-
() => ({ themeName, setThemeName }),
|
|
35
|
-
[themeName, setThemeName]
|
|
26
|
+
() => ({ themeName, setThemeName, themes }),
|
|
27
|
+
[themeName, setThemeName, themes]
|
|
36
28
|
);
|
|
37
29
|
return /* @__PURE__ */ jsx(ThemeNameContext.Provider, { value, children: /* @__PURE__ */ jsx(
|
|
38
30
|
NextThemesProvider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/providers/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type { ThemeName, Variant } from \"@augmenting-integrations/brand\";\nimport { THEME_COOKIE_KEY } from \"@augmenting-integrations/themes\";\n\ntype ThemeContextValue = {\n themeName: ThemeName;\n setThemeName: (next: ThemeName) => void;\n};\n\nconst ThemeNameContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction
|
|
1
|
+
{"version":3,"sources":["../../src/providers/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type { ThemeName, Variant } from \"@augmenting-integrations/brand\";\nimport { THEME_COOKIE_KEY, type ThemeMeta } from \"@augmenting-integrations/themes\";\n\ntype ThemeContextValue = {\n themeName: ThemeName;\n setThemeName: (next: ThemeName) => void;\n themes: ThemeMeta[];\n};\n\nconst ThemeNameContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction writeCookie(value: ThemeName) {\n if (typeof document === \"undefined\") return;\n document.cookie = `${THEME_COOKIE_KEY}=${value}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`;\n}\n\nexport function ThemeProvider({\n children,\n defaultTheme,\n defaultVariant,\n themes,\n}: {\n children: React.ReactNode;\n defaultTheme: ThemeName;\n defaultVariant: Variant;\n themes: ThemeMeta[];\n}) {\n const [themeName, setThemeNameState] = React.useState<ThemeName>(defaultTheme);\n\n const setThemeName = React.useCallback((next: ThemeName) => {\n if (typeof document !== \"undefined\") {\n document.documentElement.setAttribute(\"data-theme\", next);\n }\n writeCookie(next);\n setThemeNameState(next);\n }, []);\n\n const value = React.useMemo(\n () => ({ themeName, setThemeName, themes }),\n [themeName, setThemeName, themes],\n );\n\n return (\n <ThemeNameContext.Provider value={value}>\n <NextThemesProvider\n attribute=\"class\"\n defaultTheme={defaultVariant}\n enableSystem={false}\n disableTransitionOnChange\n >\n {children}\n </NextThemesProvider>\n </ThemeNameContext.Provider>\n );\n}\n\nexport function useThemeName() {\n const ctx = React.useContext(ThemeNameContext);\n if (!ctx) throw new Error(\"useThemeName must be used inside <ThemeProvider />\");\n return ctx;\n}\n"],"mappings":";AAgDM;AA9CN,YAAY,WAAW;AACvB,SAAS,iBAAiB,0BAA0B;AAEpD,SAAS,wBAAwC;AAQjD,MAAM,mBAAmB,MAAM,cAAwC,IAAI;AAE3E,SAAS,YAAY,OAAkB;AACrC,MAAI,OAAO,aAAa,YAAa;AACrC,WAAS,SAAS,GAAG,gBAAgB,IAAI,KAAK,qBAAqB,KAAK,KAAK,KAAK,GAAG;AACvF;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,WAAW,iBAAiB,IAAI,MAAM,SAAoB,YAAY;AAE7E,QAAM,eAAe,MAAM,YAAY,CAAC,SAAoB;AAC1D,QAAI,OAAO,aAAa,aAAa;AACnC,eAAS,gBAAgB,aAAa,cAAc,IAAI;AAAA,IAC1D;AACA,gBAAY,IAAI;AAChB,sBAAkB,IAAI;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,WAAW,cAAc,OAAO;AAAA,IACzC,CAAC,WAAW,cAAc,MAAM;AAAA,EAClC;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OACzB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAc;AAAA,MACd,cAAc;AAAA,MACd,2BAAyB;AAAA,MAExB;AAAA;AAAA,EACH,GACF;AAEJ;AAEO,SAAS,eAAe;AAC7B,QAAM,MAAM,MAAM,WAAW,gBAAgB;AAC7C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAO;AACT;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@augmenting-integrations/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Shared UI: shadcn components, brand chrome (Logo, ThemeSwitcher, RoleSwitcher), shells (PublicShell, AppShell, StudioShell), and providers (Session, Query, Theme, Mock).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"next-themes": "^0.4.0",
|
|
39
39
|
"react": "^19.0.0",
|
|
40
40
|
"react-dom": "^19.0.0",
|
|
41
|
-
"@augmenting-integrations/
|
|
42
|
-
"@augmenting-integrations/
|
|
41
|
+
"@augmenting-integrations/themes": "3.0.1",
|
|
42
|
+
"@augmenting-integrations/brand": "3.0.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@tanstack/react-query": "^5.100.9",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"tsup": "^8.3.5",
|
|
55
55
|
"typescript": "^5.7.2",
|
|
56
56
|
"vitest": "^4.1.5",
|
|
57
|
-
"@augmenting-integrations/
|
|
58
|
-
"@augmenting-integrations/
|
|
57
|
+
"@augmenting-integrations/themes": "3.0.1",
|
|
58
|
+
"@augmenting-integrations/brand": "3.0.1"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "tsup",
|