@soulbatical/tetra-ui 0.2.14 → 0.2.16
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/ThemeToggle.d.ts +4 -9
- package/dist/components/ThemeToggle.d.ts.map +1 -1
- package/dist/components/ThemeToggle.js +5 -10
- package/dist/components/ThemeToggle.js.map +1 -1
- package/dist/providers/ThemeProvider.js +1 -1
- package/dist/providers/ThemeProvider.js.map +1 -1
- package/package.json +1 -1
- package/src/styles/dark-mode.css +2 -2
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
interface ThemeToggleProps {
|
|
2
|
-
/**
|
|
3
|
-
|
|
4
|
-
/** Custom class name */
|
|
2
|
+
/** Show text label next to icon */
|
|
3
|
+
showLabel?: boolean;
|
|
4
|
+
/** Custom class name (overrides default styling) */
|
|
5
5
|
className?: string;
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
* Sun/Moon toggle for light/dark mode.
|
|
9
|
-
* Uses next-themes via @tetra/ui ThemeProvider.
|
|
10
|
-
* No external icon deps — inline SVG.
|
|
11
|
-
*/
|
|
12
|
-
export declare function ThemeToggle({ collapsed, className }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
7
|
+
export declare function ThemeToggle({ showLabel, className }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
13
8
|
export {};
|
|
14
9
|
//# sourceMappingURL=ThemeToggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,
|
|
1
|
+
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,gBAAgB,kDAiCrE"}
|
|
@@ -2,21 +2,16 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
4
|
import { useTheme } from "../providers/ThemeProvider.js";
|
|
5
|
-
|
|
6
|
-
* Sun/Moon toggle for light/dark mode.
|
|
7
|
-
* Uses next-themes via @tetra/ui ThemeProvider.
|
|
8
|
-
* No external icon deps — inline SVG.
|
|
9
|
-
*/
|
|
10
|
-
export function ThemeToggle({ collapsed, className }) {
|
|
5
|
+
export function ThemeToggle({ showLabel, className }) {
|
|
11
6
|
const { resolvedTheme, setTheme } = useTheme();
|
|
12
7
|
const [mounted, setMounted] = useState(false);
|
|
13
8
|
useEffect(() => setMounted(true), []);
|
|
14
9
|
if (!mounted)
|
|
15
10
|
return null;
|
|
16
11
|
const isDark = resolvedTheme === "dark";
|
|
17
|
-
return (_jsxs("button", { onClick: () => setTheme(isDark ? "light" : "dark"), title: isDark ? "Switch to light mode" : "Switch to dark mode", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", className: className ??
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
return (_jsxs("button", { onClick: () => setTheme(isDark ? "light" : "dark"), title: isDark ? "Switch to light mode" : "Switch to dark mode", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", className: className ?? "rounded-lg border p-1.5 transition-colors hover:opacity-80", style: className ? undefined : {
|
|
13
|
+
borderColor: 'var(--tetra-border)',
|
|
14
|
+
color: 'var(--tetra-text-muted)',
|
|
15
|
+
}, children: [isDark ? (_jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" }) })) : (_jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" }) })), showLabel && _jsx("span", { className: "ml-2 text-sm", children: isDark ? "Light mode" : "Dark mode" })] }));
|
|
21
16
|
}
|
|
22
17
|
//# sourceMappingURL=ThemeToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeToggle.js","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AASzD
|
|
1
|
+
{"version":3,"file":"ThemeToggle.js","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AASzD,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAoB;IACpE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEtC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,MAAM,GAAG,aAAa,KAAK,MAAM,CAAC;IAExC,OAAO,CACL,kBACE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAClD,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,gBAClD,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,EACnE,SAAS,EAAE,SAAS,IAAI,4DAA4D,EACpF,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;YAC7B,WAAW,EAAE,qBAAqB;YAClC,KAAK,EAAE,yBAAyB;SACjC,aAEA,MAAM,CAAC,CAAC,CAAC,CACR,cAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAC,cAAc,YAC9F,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,mMAAmM,GAAG,GACvP,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAC,cAAc,YAC9F,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,sLAAsL,GAAG,GAC1O,CACP,EACA,SAAS,IAAI,eAAM,SAAS,EAAC,cAAc,YAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,GAAQ,IAClF,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from "n
|
|
|
6
6
|
* Uses next-themes. Sets .dark class on <html> for Tailwind.
|
|
7
7
|
*/
|
|
8
8
|
export function ThemeProvider({ children, defaultTheme = "dark", }) {
|
|
9
|
-
return (_jsx(NextThemesProvider, { attribute: "class", defaultTheme: defaultTheme, enableSystem: true, children: children }));
|
|
9
|
+
return (_jsx(NextThemesProvider, { attribute: ["class", "data-theme"], defaultTheme: defaultTheme, enableSystem: true, children: children }));
|
|
10
10
|
}
|
|
11
11
|
/** Re-export next-themes useTheme — one import for consumers */
|
|
12
12
|
export const useTheme = useNextTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ5F;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,MAAM,GACF;IACnB,OAAO,CACL,KAAC,kBAAkB,IAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ5F;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,MAAM,GACF;IACnB,OAAO,CACL,KAAC,kBAAkB,IAAC,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,kBAC7F,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.2.
|
|
7
|
+
"version": "0.2.16",
|
|
8
8
|
"description": "Shared React frontend framework for Tetra platform projects (Soulbatical BV) — config-driven components, hooks, providers, and styling",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"main": "dist/index.js",
|
package/src/styles/dark-mode.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
@media (prefers-color-scheme: dark) {
|
|
12
|
-
:root:not([data-theme="light"]) {
|
|
12
|
+
:root:not([data-theme="light"]):not(.light) {
|
|
13
13
|
--tetra-bg: #1a1a2e;
|
|
14
14
|
--tetra-bg-subtle: #222240;
|
|
15
15
|
--tetra-bg-muted: #2a2a4a;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
[data-theme="dark"] {
|
|
33
|
+
[data-theme="dark"], .dark {
|
|
34
34
|
--tetra-bg: #1a1a2e;
|
|
35
35
|
--tetra-bg-subtle: #222240;
|
|
36
36
|
--tetra-bg-muted: #2a2a4a;
|