@augmenting-integrations/ui 2.1.0 → 3.0.0
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/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":[]}
|
|
@@ -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.0",
|
|
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/brand": "
|
|
42
|
-
"@augmenting-integrations/themes": "
|
|
41
|
+
"@augmenting-integrations/brand": "3.0.0",
|
|
42
|
+
"@augmenting-integrations/themes": "3.0.0"
|
|
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/brand": "
|
|
58
|
-
"@augmenting-integrations/themes": "
|
|
57
|
+
"@augmenting-integrations/brand": "3.0.0",
|
|
58
|
+
"@augmenting-integrations/themes": "3.0.0"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "tsup",
|