@schemavaults/ui 0.54.1 → 0.54.2
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.
|
@@ -27,10 +27,12 @@ export interface ThemeSelectorProps extends Omit<HTMLAttributes<HTMLElement>, "o
|
|
|
27
27
|
* - `"compact"`: a single icon-only button that displays the currently active
|
|
28
28
|
* theme; clicking it opens a dropdown menu of available themes.
|
|
29
29
|
*
|
|
30
|
-
* Must be rendered inside a `<BrightnessThemeProvider />`.
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
30
|
+
* Must be rendered inside a `<BrightnessThemeProvider />`. On the server (and
|
|
31
|
+
* during the first client render) the component renders an inert disabled
|
|
32
|
+
* control so that the SSR markup matches the initial client hydration, then
|
|
33
|
+
* swaps to the real theme-aware UI in a `useEffect` after mount — this avoids
|
|
34
|
+
* the next-themes server/client hydration mismatch without leaving an
|
|
35
|
+
* unresolved Suspense boundary in the tree (which breaks static prerender).
|
|
34
36
|
*
|
|
35
37
|
* @see BrightnessThemeProvider
|
|
36
38
|
* @see useBrightnessTheme
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Monitor, Moon, Sun } from "lucide-react";
|
|
4
|
-
import {
|
|
4
|
+
import { useEffect, useState, } from "react";
|
|
5
5
|
import { cn } from "../../../lib/utils";
|
|
6
6
|
import { SegmentedControl, SegmentedControlItem, } from "../../ui/segmented-control";
|
|
7
7
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../../ui/dropdown-menu";
|
|
@@ -49,39 +49,28 @@ function isThemeSelectorOptionId(value) {
|
|
|
49
49
|
return (value !== undefined &&
|
|
50
50
|
themeSelectorOptionIds.includes(value));
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
* theme-aware UI takes over. The single cached promise is shared by every
|
|
59
|
-
* instance so the gate only opens once per page.
|
|
60
|
-
*/
|
|
61
|
-
let hydrationPromise = null;
|
|
62
|
-
function getHydrationPromise() {
|
|
63
|
-
if (typeof window === "undefined") {
|
|
64
|
-
return new Promise(() => { });
|
|
65
|
-
}
|
|
66
|
-
if (!hydrationPromise) {
|
|
67
|
-
hydrationPromise = new Promise((resolve) => {
|
|
68
|
-
setTimeout(resolve);
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
return hydrationPromise;
|
|
52
|
+
function useHasMounted() {
|
|
53
|
+
const [mounted, setMounted] = useState(false);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
setMounted(true);
|
|
56
|
+
}, []);
|
|
57
|
+
return mounted;
|
|
72
58
|
}
|
|
73
|
-
|
|
74
|
-
|
|
59
|
+
const compactButtonClass = "inline-flex items-center justify-center rounded-md border border-input bg-background text-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
|
|
60
|
+
function SegmentedThemeSelector({ size, iconOnly, disabled, className, rest, }) {
|
|
61
|
+
const mounted = useHasMounted();
|
|
75
62
|
const { theme, setTheme } = useBrightnessTheme();
|
|
63
|
+
if (!mounted) {
|
|
64
|
+
return (_jsx(SegmentedControl, { value: "", variant: "outline", size: size, disabled: true, "aria-hidden": "true", className: className, children: renderThemeItems(size, iconOnly) }));
|
|
65
|
+
}
|
|
76
66
|
return (_jsx(SegmentedControl, { value: theme ?? "", onValueChange: setTheme, variant: "outline", size: size, disabled: disabled, "aria-label": "Color theme", className: className, ...rest, children: renderThemeItems(size, iconOnly) }));
|
|
77
67
|
}
|
|
78
|
-
function
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
const compactButtonClass = "inline-flex items-center justify-center rounded-md border border-input bg-background text-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
|
|
82
|
-
function CompactThemeSelectorContent({ size, disabled, className, rest, }) {
|
|
83
|
-
use(getHydrationPromise());
|
|
68
|
+
function CompactThemeSelector({ size, disabled, className, rest, }) {
|
|
69
|
+
const mounted = useHasMounted();
|
|
84
70
|
const { theme, setTheme } = useBrightnessTheme();
|
|
71
|
+
if (!mounted) {
|
|
72
|
+
return (_jsx("button", { type: "button", disabled: true, "aria-hidden": "true", tabIndex: -1, className: cn(compactButtonClass, compactButtonSizeClasses[size], className), children: _jsx(Monitor, { className: cn(iconSizeBySize[size]), "aria-hidden": "true" }) }));
|
|
73
|
+
}
|
|
85
74
|
const activeId = isThemeSelectorOptionId(theme)
|
|
86
75
|
? theme
|
|
87
76
|
: "system";
|
|
@@ -96,9 +85,6 @@ function CompactThemeSelectorContent({ size, disabled, className, rest, }) {
|
|
|
96
85
|
return (_jsxs(DropdownMenuRadioItem, { value: option.id, children: [_jsx(Icon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }), _jsx("span", { children: option.label })] }, option.id));
|
|
97
86
|
}) }) })] }));
|
|
98
87
|
}
|
|
99
|
-
function CompactThemeSelectorFallback({ size, className, }) {
|
|
100
|
-
return (_jsx("button", { type: "button", disabled: true, "aria-hidden": "true", tabIndex: -1, className: cn(compactButtonClass, compactButtonSizeClasses[size], className), children: _jsx(Monitor, { className: cn(iconSizeBySize[size]), "aria-hidden": "true" }) }));
|
|
101
|
-
}
|
|
102
88
|
/**
|
|
103
89
|
* A brightness theme switcher driven by {@link useBrightnessTheme}.
|
|
104
90
|
*
|
|
@@ -108,10 +94,12 @@ function CompactThemeSelectorFallback({ size, className, }) {
|
|
|
108
94
|
* - `"compact"`: a single icon-only button that displays the currently active
|
|
109
95
|
* theme; clicking it opens a dropdown menu of available themes.
|
|
110
96
|
*
|
|
111
|
-
* Must be rendered inside a `<BrightnessThemeProvider />`.
|
|
112
|
-
*
|
|
113
|
-
*
|
|
114
|
-
*
|
|
97
|
+
* Must be rendered inside a `<BrightnessThemeProvider />`. On the server (and
|
|
98
|
+
* during the first client render) the component renders an inert disabled
|
|
99
|
+
* control so that the SSR markup matches the initial client hydration, then
|
|
100
|
+
* swaps to the real theme-aware UI in a `useEffect` after mount — this avoids
|
|
101
|
+
* the next-themes server/client hydration mismatch without leaving an
|
|
102
|
+
* unresolved Suspense boundary in the tree (which breaks static prerender).
|
|
115
103
|
*
|
|
116
104
|
* @see BrightnessThemeProvider
|
|
117
105
|
* @see useBrightnessTheme
|
|
@@ -120,10 +108,10 @@ function CompactThemeSelectorFallback({ size, className, }) {
|
|
|
120
108
|
export function ThemeSelector({ className, variant = "segmented", size = "default", iconOnly = false, disabled = false, ...rest }) {
|
|
121
109
|
if (variant === "compact") {
|
|
122
110
|
const buttonRest = rest;
|
|
123
|
-
return (_jsx(
|
|
111
|
+
return (_jsx(CompactThemeSelector, { size: size, disabled: disabled, className: className, rest: buttonRest }));
|
|
124
112
|
}
|
|
125
113
|
const divRest = rest;
|
|
126
|
-
return (_jsx(
|
|
114
|
+
return (_jsx(SegmentedThemeSelector, { size: size, iconOnly: iconOnly, disabled: disabled, className: className, rest: divRest }));
|
|
127
115
|
}
|
|
128
116
|
ThemeSelector.displayName = "ThemeSelector";
|
|
129
117
|
export default ThemeSelector;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-selector.js","sourceRoot":"","sources":["../../../../src/components/ui/theme-selector/theme-selector.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAmB,MAAM,cAAc,CAAC;AACnE,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"theme-selector.js","sourceRoot":"","sources":["../../../../src/components/ui/theme-selector/theme-selector.tsx"],"names":[],"mappings":"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"}
|