@space-man/react-theme-animation 2.0.0 → 2.3.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/README.md +90 -464
- package/dist/core/index.cjs +74 -0
- package/dist/core/index.cjs.map +1 -0
- package/dist/{esm/types/index.d.ts → core/index.d.cts} +30 -12
- package/dist/{cjs/types → core}/index.d.ts +30 -12
- package/dist/core/index.js +66 -0
- package/dist/core/index.js.map +1 -0
- package/dist/index.cjs +1756 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1706 -0
- package/dist/index.js.map +1 -0
- package/dist/react/index.cjs +1742 -0
- package/dist/react/index.cjs.map +1 -0
- package/dist/react/index.d.cts +224 -0
- package/dist/react/index.d.ts +224 -0
- package/dist/react/index.js +1697 -0
- package/dist/react/index.js.map +1 -0
- package/dist/tanstack/index.cjs +34 -0
- package/dist/tanstack/index.cjs.map +1 -0
- package/dist/tanstack/index.d.cts +20 -0
- package/dist/tanstack/index.d.ts +20 -0
- package/dist/tanstack/index.js +27 -0
- package/dist/tanstack/index.js.map +1 -0
- package/package.json +66 -37
- package/dist/cjs/components/SpacemanThemeProvider.d.ts +0 -57
- package/dist/cjs/components/SpacemanThemeProvider.js +0 -113
- package/dist/cjs/components/ThemeSelector.d.ts +0 -3
- package/dist/cjs/components/ThemeSelector.js +0 -39
- package/dist/cjs/components/ThemeSwitcher.d.ts +0 -3
- package/dist/cjs/components/ThemeSwitcher.js +0 -81
- package/dist/cjs/components/ViteThemeProvider.d.ts +0 -38
- package/dist/cjs/components/ViteThemeProvider.js +0 -117
- package/dist/cjs/components/ui/select.d.ts +0 -15
- package/dist/cjs/components/ui/select.js +0 -83
- package/dist/cjs/hooks/use-theme-animation.d.ts +0 -2
- package/dist/cjs/hooks/use-theme-animation.js +0 -234
- package/dist/cjs/index.d.ts +0 -8
- package/dist/cjs/index.js +0 -23
- package/dist/cjs/types/index.js +0 -9
- package/dist/cjs/utils/animations.d.ts +0 -21
- package/dist/cjs/utils/animations.js +0 -189
- package/dist/esm/components/SpacemanThemeProvider.d.ts +0 -57
- package/dist/esm/components/SpacemanThemeProvider.js +0 -108
- package/dist/esm/components/ThemeSelector.d.ts +0 -3
- package/dist/esm/components/ThemeSelector.js +0 -35
- package/dist/esm/components/ThemeSwitcher.d.ts +0 -3
- package/dist/esm/components/ThemeSwitcher.js +0 -77
- package/dist/esm/components/ViteThemeProvider.d.ts +0 -38
- package/dist/esm/components/ViteThemeProvider.js +0 -112
- package/dist/esm/components/ui/select.d.ts +0 -15
- package/dist/esm/components/ui/select.js +0 -39
- package/dist/esm/hooks/use-theme-animation.d.ts +0 -2
- package/dist/esm/hooks/use-theme-animation.js +0 -230
- package/dist/esm/index.d.ts +0 -8
- package/dist/esm/index.js +0 -7
- package/dist/esm/types/index.js +0 -6
- package/dist/esm/utils/animations.d.ts +0 -21
- package/dist/esm/utils/animations.js +0 -177
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { Theme, ColorTheme, ThemeAnimationType } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* Context type for the Spaceman Theme Provider
|
|
5
|
-
*/
|
|
6
|
-
interface SpacemanThemeContextType {
|
|
7
|
-
ref: React.RefObject<HTMLButtonElement | null>;
|
|
8
|
-
theme: Theme;
|
|
9
|
-
colorTheme: ColorTheme;
|
|
10
|
-
resolvedTheme: 'light' | 'dark';
|
|
11
|
-
setTheme: (theme: Theme) => void;
|
|
12
|
-
setColorTheme: (colorTheme: ColorTheme) => void;
|
|
13
|
-
switchTheme: (theme: Theme) => Promise<void>;
|
|
14
|
-
switchColorTheme: (colorTheme: string) => void;
|
|
15
|
-
toggleTheme: () => Promise<void>;
|
|
16
|
-
toggleLightTheme: () => Promise<void>;
|
|
17
|
-
toggleDarkTheme: () => Promise<void>;
|
|
18
|
-
toggleColorTheme: () => void;
|
|
19
|
-
createColorThemeToggle: (targetColorTheme: string) => () => void;
|
|
20
|
-
isColorThemeActive: (targetColorTheme: string) => boolean;
|
|
21
|
-
switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Props for the Spaceman Theme Provider
|
|
25
|
-
*/
|
|
26
|
-
interface SpacemanThemeProviderProps {
|
|
27
|
-
children: ReactNode;
|
|
28
|
-
themes?: Theme[];
|
|
29
|
-
colorThemes?: ColorTheme[];
|
|
30
|
-
defaultTheme?: Theme;
|
|
31
|
-
defaultColorTheme?: ColorTheme;
|
|
32
|
-
animationType?: ThemeAnimationType;
|
|
33
|
-
duration?: number;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Spaceman Theme Provider - Provides centralized theme state management
|
|
37
|
-
*
|
|
38
|
-
* This provider creates a single source of truth for theme state using the useThemeAnimation hook.
|
|
39
|
-
* All theme-related components should consume from this context to ensure synchronization.
|
|
40
|
-
*
|
|
41
|
-
* @param children - React children to wrap with theme context
|
|
42
|
-
* @param themes - Available theme options (default: ['light', 'dark', 'system'])
|
|
43
|
-
* @param colorThemes - Available color theme options (default: ['default'])
|
|
44
|
-
* @param defaultTheme - Default theme to use (default: 'system')
|
|
45
|
-
* @param defaultColorTheme - Default color theme to use (default: 'default')
|
|
46
|
-
* @param animationType - Animation type for theme transitions (default: CIRCLE)
|
|
47
|
-
* @param duration - Animation duration in milliseconds (default: 750)
|
|
48
|
-
*/
|
|
49
|
-
export declare const SpacemanThemeProvider: React.FC<SpacemanThemeProviderProps>;
|
|
50
|
-
/**
|
|
51
|
-
* Hook to consume the Spaceman Theme context
|
|
52
|
-
*
|
|
53
|
-
* @returns Theme context value with all theme state and methods
|
|
54
|
-
* @throws Error if used outside of SpacemanThemeProvider
|
|
55
|
-
*/
|
|
56
|
-
export declare const useSpacemanTheme: () => SpacemanThemeContextType;
|
|
57
|
-
export {};
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useSpacemanTheme = exports.SpacemanThemeProvider = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const use_theme_animation_1 = require("../hooks/use-theme-animation");
|
|
7
|
-
const types_1 = require("../types");
|
|
8
|
-
const SpacemanThemeContext = (0, react_1.createContext)(undefined);
|
|
9
|
-
/**
|
|
10
|
-
* Spaceman Theme Provider - Provides centralized theme state management
|
|
11
|
-
*
|
|
12
|
-
* This provider creates a single source of truth for theme state using the useThemeAnimation hook.
|
|
13
|
-
* All theme-related components should consume from this context to ensure synchronization.
|
|
14
|
-
*
|
|
15
|
-
* @param children - React children to wrap with theme context
|
|
16
|
-
* @param themes - Available theme options (default: ['light', 'dark', 'system'])
|
|
17
|
-
* @param colorThemes - Available color theme options (default: ['default'])
|
|
18
|
-
* @param defaultTheme - Default theme to use (default: 'system')
|
|
19
|
-
* @param defaultColorTheme - Default color theme to use (default: 'default')
|
|
20
|
-
* @param animationType - Animation type for theme transitions (default: CIRCLE)
|
|
21
|
-
* @param duration - Animation duration in milliseconds (default: 750)
|
|
22
|
-
*/
|
|
23
|
-
const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, }) => {
|
|
24
|
-
const [mounted, setMounted] = (0, react_1.useState)(false);
|
|
25
|
-
const themeState = (0, use_theme_animation_1.useThemeAnimation)({
|
|
26
|
-
themes,
|
|
27
|
-
colorThemes,
|
|
28
|
-
defaultTheme,
|
|
29
|
-
defaultColorTheme,
|
|
30
|
-
animationType,
|
|
31
|
-
duration,
|
|
32
|
-
});
|
|
33
|
-
(0, react_1.useEffect)(() => {
|
|
34
|
-
setMounted(true);
|
|
35
|
-
}, []);
|
|
36
|
-
const switchThemeFromElement = async (theme, element) => {
|
|
37
|
-
if (themeState.ref.current) {
|
|
38
|
-
const originalRef = themeState.ref.current;
|
|
39
|
-
Object.defineProperty(themeState.ref, 'current', {
|
|
40
|
-
value: element,
|
|
41
|
-
writable: true,
|
|
42
|
-
configurable: true,
|
|
43
|
-
});
|
|
44
|
-
await themeState.switchTheme(theme);
|
|
45
|
-
Object.defineProperty(themeState.ref, 'current', {
|
|
46
|
-
value: originalRef,
|
|
47
|
-
writable: true,
|
|
48
|
-
configurable: true,
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
Object.defineProperty(themeState.ref, 'current', {
|
|
53
|
-
value: element,
|
|
54
|
-
writable: true,
|
|
55
|
-
configurable: true,
|
|
56
|
-
});
|
|
57
|
-
await themeState.switchTheme(theme);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
if (!mounted) {
|
|
61
|
-
const loadingContextValue = {
|
|
62
|
-
ref: { current: null },
|
|
63
|
-
theme: defaultTheme,
|
|
64
|
-
colorTheme: defaultColorTheme,
|
|
65
|
-
resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
|
|
66
|
-
setTheme: () => { },
|
|
67
|
-
setColorTheme: () => { },
|
|
68
|
-
switchTheme: async () => { },
|
|
69
|
-
switchThemeFromElement: async () => { },
|
|
70
|
-
switchColorTheme: () => { },
|
|
71
|
-
toggleTheme: async () => { },
|
|
72
|
-
toggleLightTheme: async () => { },
|
|
73
|
-
toggleDarkTheme: async () => { },
|
|
74
|
-
toggleColorTheme: () => { },
|
|
75
|
-
createColorThemeToggle: () => () => { },
|
|
76
|
-
isColorThemeActive: () => false,
|
|
77
|
-
};
|
|
78
|
-
return ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: loadingContextValue, children: children }));
|
|
79
|
-
}
|
|
80
|
-
const contextValue = {
|
|
81
|
-
ref: themeState.ref,
|
|
82
|
-
theme: themeState.theme,
|
|
83
|
-
colorTheme: themeState.colorTheme,
|
|
84
|
-
resolvedTheme: themeState.resolvedTheme,
|
|
85
|
-
setTheme: themeState.setTheme,
|
|
86
|
-
setColorTheme: themeState.setColorTheme,
|
|
87
|
-
switchTheme: themeState.switchTheme,
|
|
88
|
-
switchThemeFromElement,
|
|
89
|
-
switchColorTheme: themeState.switchColorTheme,
|
|
90
|
-
toggleTheme: themeState.toggleTheme,
|
|
91
|
-
toggleLightTheme: themeState.toggleLightTheme,
|
|
92
|
-
toggleDarkTheme: themeState.toggleDarkTheme,
|
|
93
|
-
toggleColorTheme: themeState.toggleColorTheme,
|
|
94
|
-
createColorThemeToggle: themeState.createColorThemeToggle,
|
|
95
|
-
isColorThemeActive: themeState.isColorThemeActive,
|
|
96
|
-
};
|
|
97
|
-
return ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
|
|
98
|
-
};
|
|
99
|
-
exports.SpacemanThemeProvider = SpacemanThemeProvider;
|
|
100
|
-
/**
|
|
101
|
-
* Hook to consume the Spaceman Theme context
|
|
102
|
-
*
|
|
103
|
-
* @returns Theme context value with all theme state and methods
|
|
104
|
-
* @throws Error if used outside of SpacemanThemeProvider
|
|
105
|
-
*/
|
|
106
|
-
const useSpacemanTheme = () => {
|
|
107
|
-
const context = (0, react_1.useContext)(SpacemanThemeContext);
|
|
108
|
-
if (context === undefined) {
|
|
109
|
-
throw new Error('useSpacemanTheme must be used within a SpacemanThemeProvider');
|
|
110
|
-
}
|
|
111
|
-
return context;
|
|
112
|
-
};
|
|
113
|
-
exports.useSpacemanTheme = useSpacemanTheme;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ThemeSelector = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const use_theme_animation_1 = require("../hooks/use-theme-animation");
|
|
6
|
-
const SpacemanThemeProvider_1 = require("./SpacemanThemeProvider");
|
|
7
|
-
const select_1 = require("./ui/select");
|
|
8
|
-
const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorThemes = ['default'], currentColorTheme, onColorThemeChange, animationType, duration, }) => {
|
|
9
|
-
// Try to use SpacemanTheme context if available (controlled mode)
|
|
10
|
-
let contextTheme = null;
|
|
11
|
-
try {
|
|
12
|
-
contextTheme = (0, SpacemanThemeProvider_1.useSpacemanTheme)();
|
|
13
|
-
}
|
|
14
|
-
catch {
|
|
15
|
-
// Context not available, use standalone mode
|
|
16
|
-
}
|
|
17
|
-
// Use context if available, otherwise fall back to standalone hook
|
|
18
|
-
const standaloneHook = (0, use_theme_animation_1.useThemeAnimation)({
|
|
19
|
-
animationType,
|
|
20
|
-
duration,
|
|
21
|
-
themes,
|
|
22
|
-
colorThemes,
|
|
23
|
-
...(currentColorTheme !== undefined && { colorTheme: currentColorTheme }),
|
|
24
|
-
onColorThemeChange,
|
|
25
|
-
});
|
|
26
|
-
const isControlled = contextTheme !== null;
|
|
27
|
-
const { colorTheme, setColorTheme } = isControlled
|
|
28
|
-
? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
|
|
29
|
-
: standaloneHook;
|
|
30
|
-
const handleColorThemeChange = (newColorTheme) => {
|
|
31
|
-
setColorTheme(newColorTheme);
|
|
32
|
-
// Also call the callback if provided
|
|
33
|
-
if (onColorThemeChange) {
|
|
34
|
-
onColorThemeChange(newColorTheme);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colorThemes.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: (0, jsx_runtime_1.jsxs)(select_1.Select, { value: colorTheme, onValueChange: (v) => handleColorThemeChange(v), children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: "capitalize", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Choose a color theme" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: colorThemes.map(theme => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { className: "capitalize", value: theme, children: theme }, theme))) })] }) })) }));
|
|
38
|
-
};
|
|
39
|
-
exports.ThemeSelector = ThemeSelector;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ThemeSwitcher = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const react_2 = require("motion/react");
|
|
7
|
-
const clsx_1 = require("clsx");
|
|
8
|
-
const use_theme_animation_1 = require("../hooks/use-theme-animation");
|
|
9
|
-
const SpacemanThemeProvider_1 = require("./SpacemanThemeProvider");
|
|
10
|
-
const SunIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "5" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] }));
|
|
11
|
-
const MoonIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
|
|
12
|
-
const MonitorIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
|
|
13
|
-
const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.clsx)('relative flex h-9 w-12 cursor-pointer items-center justify-center', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: event => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
|
|
15
|
-
borderRadius: 'var(--radius)',
|
|
16
|
-
}, children: [isHovered && ((0, jsx_runtime_1.jsx)(react_2.motion.div, { layoutId: "theme-hover", className: "absolute inset-0 bg-muted", style: {
|
|
17
|
-
borderRadius: 'var(--radius)',
|
|
18
|
-
}, transition: {
|
|
19
|
-
type: 'spring',
|
|
20
|
-
bounce: 0,
|
|
21
|
-
stiffness: 100,
|
|
22
|
-
damping: 10,
|
|
23
|
-
duration: 0.3,
|
|
24
|
-
} })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full", style: {
|
|
25
|
-
backgroundColor: 'hsl(var(--primary))',
|
|
26
|
-
} }))] }));
|
|
27
|
-
};
|
|
28
|
-
const THEME_OPTIONS = [
|
|
29
|
-
{
|
|
30
|
-
icon: (0, jsx_runtime_1.jsx)(MonitorIcon, {}),
|
|
31
|
-
value: 'system',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
icon: (0, jsx_runtime_1.jsx)(SunIcon, {}),
|
|
35
|
-
value: 'light',
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
icon: (0, jsx_runtime_1.jsx)(MoonIcon, {}),
|
|
39
|
-
value: 'dark',
|
|
40
|
-
},
|
|
41
|
-
];
|
|
42
|
-
const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onThemeChange, animationType, duration, className, }) => {
|
|
43
|
-
let contextTheme = null;
|
|
44
|
-
try {
|
|
45
|
-
contextTheme = (0, SpacemanThemeProvider_1.useSpacemanTheme)();
|
|
46
|
-
}
|
|
47
|
-
catch { }
|
|
48
|
-
const standaloneHook = (0, use_theme_animation_1.useThemeAnimation)({
|
|
49
|
-
animationType,
|
|
50
|
-
duration,
|
|
51
|
-
themes,
|
|
52
|
-
...(currentTheme !== undefined && { theme: currentTheme }),
|
|
53
|
-
onThemeChange,
|
|
54
|
-
});
|
|
55
|
-
const isControlled = contextTheme !== null;
|
|
56
|
-
const { ref, theme, switchTheme } = isControlled
|
|
57
|
-
? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
|
|
58
|
-
: standaloneHook;
|
|
59
|
-
const [isMounted, setIsMounted] = (0, react_1.useState)(false);
|
|
60
|
-
const [hoveredTheme, setHoveredTheme] = (0, react_1.useState)(null);
|
|
61
|
-
(0, react_1.useEffect)(() => {
|
|
62
|
-
setIsMounted(true);
|
|
63
|
-
}, []);
|
|
64
|
-
const handleThemeChange = async (newTheme, event) => {
|
|
65
|
-
if (isControlled && contextTheme.switchThemeFromElement && event) {
|
|
66
|
-
await contextTheme.switchThemeFromElement(newTheme, event.currentTarget);
|
|
67
|
-
if (onThemeChange) {
|
|
68
|
-
onThemeChange(newTheme);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
await switchTheme(newTheme);
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
const filteredOptions = THEME_OPTIONS.filter(option => themes.includes(option.value));
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('inline-flex h-9 items-center overflow-hidden bg-background shadow-sm border border-border', isMounted ? 'opacity-100' : 'opacity-0', className), style: {
|
|
77
|
-
borderRadius: 'var(--radius)',
|
|
78
|
-
backgroundColor: 'hsl(var(--background))',
|
|
79
|
-
}, role: "radiogroup", onMouseLeave: () => setHoveredTheme(null), children: filteredOptions.map(option => ((0, jsx_runtime_1.jsx)(ThemeOption, { icon: option.icon, value: option.value, isActive: theme === option.value, isHovered: hoveredTheme === option.value, onClick: handleThemeChange, onMouseEnter: () => setHoveredTheme(option.value), onMouseLeave: () => { }, buttonRef: theme === option.value ? ref : undefined }, option.value))) }));
|
|
80
|
-
};
|
|
81
|
-
exports.ThemeSwitcher = ThemeSwitcher;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { Theme, ColorTheme, ThemeAnimationType } from '../types';
|
|
3
|
-
interface ViteThemeContextType {
|
|
4
|
-
ref: React.RefObject<HTMLButtonElement | null>;
|
|
5
|
-
theme: Theme;
|
|
6
|
-
colorTheme: ColorTheme;
|
|
7
|
-
resolvedTheme: 'light' | 'dark';
|
|
8
|
-
systemTheme: 'light' | 'dark';
|
|
9
|
-
setTheme: (theme: Theme) => void;
|
|
10
|
-
setColorTheme: (colorTheme: ColorTheme) => void;
|
|
11
|
-
switchTheme: (theme: Theme) => Promise<void>;
|
|
12
|
-
switchColorTheme: (colorTheme: string) => void;
|
|
13
|
-
toggleTheme: () => Promise<void>;
|
|
14
|
-
toggleLightTheme: () => Promise<void>;
|
|
15
|
-
toggleDarkTheme: () => Promise<void>;
|
|
16
|
-
toggleColorTheme: () => void;
|
|
17
|
-
createColorThemeToggle: (targetColorTheme: string) => () => void;
|
|
18
|
-
isColorThemeActive: (targetColorTheme: string) => boolean;
|
|
19
|
-
switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
|
|
20
|
-
}
|
|
21
|
-
interface ViteThemeProviderProps {
|
|
22
|
-
children: ReactNode;
|
|
23
|
-
themes?: Theme[];
|
|
24
|
-
colorThemes?: ColorTheme[];
|
|
25
|
-
defaultTheme?: Theme;
|
|
26
|
-
defaultColorTheme?: ColorTheme;
|
|
27
|
-
animationType?: ThemeAnimationType;
|
|
28
|
-
duration?: number;
|
|
29
|
-
attribute?: 'class' | 'data-theme';
|
|
30
|
-
disableTransitionOnChange?: boolean;
|
|
31
|
-
storageKey?: string;
|
|
32
|
-
colorStorageKey?: string;
|
|
33
|
-
globalClassName?: string;
|
|
34
|
-
colorThemePrefix?: string;
|
|
35
|
-
}
|
|
36
|
-
export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
|
|
37
|
-
export declare const useViteTheme: () => ViteThemeContextType;
|
|
38
|
-
export {};
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useViteTheme = exports.ViteThemeProvider = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const use_theme_animation_1 = require("../hooks/use-theme-animation");
|
|
7
|
-
const types_1 = require("../types");
|
|
8
|
-
const ViteThemeContext = (0, react_1.createContext)(undefined);
|
|
9
|
-
const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
|
|
10
|
-
const themeState = (0, use_theme_animation_1.useThemeAnimation)({
|
|
11
|
-
themes,
|
|
12
|
-
colorThemes,
|
|
13
|
-
defaultTheme,
|
|
14
|
-
defaultColorTheme,
|
|
15
|
-
animationType,
|
|
16
|
-
duration,
|
|
17
|
-
storageKey,
|
|
18
|
-
colorStorageKey,
|
|
19
|
-
globalClassName: attribute === 'class' ? globalClassName : undefined,
|
|
20
|
-
colorThemePrefix,
|
|
21
|
-
});
|
|
22
|
-
const applyTransitionDisable = (0, react_1.useCallback)(() => {
|
|
23
|
-
if (!disableTransitionOnChange)
|
|
24
|
-
return () => { };
|
|
25
|
-
const css = document.createElement('style');
|
|
26
|
-
css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
|
|
27
|
-
document.head.appendChild(css);
|
|
28
|
-
window.getComputedStyle(document.body);
|
|
29
|
-
return () => {
|
|
30
|
-
setTimeout(() => {
|
|
31
|
-
document.head.removeChild(css);
|
|
32
|
-
}, 1);
|
|
33
|
-
};
|
|
34
|
-
}, [disableTransitionOnChange]);
|
|
35
|
-
const wrappedSetTheme = (0, react_1.useCallback)((theme) => {
|
|
36
|
-
const cleanup = applyTransitionDisable();
|
|
37
|
-
themeState.setTheme(theme);
|
|
38
|
-
cleanup();
|
|
39
|
-
}, [themeState.setTheme, applyTransitionDisable]);
|
|
40
|
-
const wrappedSwitchTheme = (0, react_1.useCallback)(async (theme) => {
|
|
41
|
-
const cleanup = applyTransitionDisable();
|
|
42
|
-
await themeState.switchTheme(theme);
|
|
43
|
-
cleanup();
|
|
44
|
-
}, [themeState.switchTheme, applyTransitionDisable]);
|
|
45
|
-
const wrappedToggleTheme = (0, react_1.useCallback)(async () => {
|
|
46
|
-
const cleanup = applyTransitionDisable();
|
|
47
|
-
await themeState.toggleTheme();
|
|
48
|
-
cleanup();
|
|
49
|
-
}, [themeState.toggleTheme, applyTransitionDisable]);
|
|
50
|
-
const wrappedToggleLightTheme = (0, react_1.useCallback)(async () => {
|
|
51
|
-
const cleanup = applyTransitionDisable();
|
|
52
|
-
await themeState.toggleLightTheme();
|
|
53
|
-
cleanup();
|
|
54
|
-
}, [themeState.toggleLightTheme, applyTransitionDisable]);
|
|
55
|
-
const wrappedToggleDarkTheme = (0, react_1.useCallback)(async () => {
|
|
56
|
-
const cleanup = applyTransitionDisable();
|
|
57
|
-
await themeState.toggleDarkTheme();
|
|
58
|
-
cleanup();
|
|
59
|
-
}, [themeState.toggleDarkTheme, applyTransitionDisable]);
|
|
60
|
-
const switchThemeFromElement = async (theme, element) => {
|
|
61
|
-
const cleanup = applyTransitionDisable();
|
|
62
|
-
if (themeState.ref.current) {
|
|
63
|
-
const originalRef = themeState.ref.current;
|
|
64
|
-
Object.defineProperty(themeState.ref, 'current', {
|
|
65
|
-
value: element,
|
|
66
|
-
writable: true,
|
|
67
|
-
configurable: true,
|
|
68
|
-
});
|
|
69
|
-
await themeState.switchTheme(theme);
|
|
70
|
-
Object.defineProperty(themeState.ref, 'current', {
|
|
71
|
-
value: originalRef,
|
|
72
|
-
writable: true,
|
|
73
|
-
configurable: true,
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
Object.defineProperty(themeState.ref, 'current', {
|
|
78
|
-
value: element,
|
|
79
|
-
writable: true,
|
|
80
|
-
configurable: true,
|
|
81
|
-
});
|
|
82
|
-
await themeState.switchTheme(theme);
|
|
83
|
-
}
|
|
84
|
-
cleanup();
|
|
85
|
-
};
|
|
86
|
-
const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
87
|
-
? 'dark'
|
|
88
|
-
: 'light';
|
|
89
|
-
const contextValue = {
|
|
90
|
-
ref: themeState.ref,
|
|
91
|
-
theme: themeState.theme,
|
|
92
|
-
colorTheme: themeState.colorTheme,
|
|
93
|
-
resolvedTheme: themeState.resolvedTheme,
|
|
94
|
-
systemTheme,
|
|
95
|
-
setTheme: wrappedSetTheme,
|
|
96
|
-
setColorTheme: themeState.setColorTheme,
|
|
97
|
-
switchTheme: wrappedSwitchTheme,
|
|
98
|
-
switchThemeFromElement,
|
|
99
|
-
switchColorTheme: themeState.switchColorTheme,
|
|
100
|
-
toggleTheme: wrappedToggleTheme,
|
|
101
|
-
toggleLightTheme: wrappedToggleLightTheme,
|
|
102
|
-
toggleDarkTheme: wrappedToggleDarkTheme,
|
|
103
|
-
toggleColorTheme: themeState.toggleColorTheme,
|
|
104
|
-
createColorThemeToggle: themeState.createColorThemeToggle,
|
|
105
|
-
isColorThemeActive: themeState.isColorThemeActive,
|
|
106
|
-
};
|
|
107
|
-
return (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: contextValue, children: children });
|
|
108
|
-
};
|
|
109
|
-
exports.ViteThemeProvider = ViteThemeProvider;
|
|
110
|
-
const useViteTheme = () => {
|
|
111
|
-
const context = (0, react_1.useContext)(ViteThemeContext);
|
|
112
|
-
if (context === undefined) {
|
|
113
|
-
throw new Error('useViteTheme must be used within a ViteThemeProvider');
|
|
114
|
-
}
|
|
115
|
-
return context;
|
|
116
|
-
};
|
|
117
|
-
exports.useViteTheme = useViteTheme;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
3
|
-
declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
7
|
-
size?: 'sm' | 'default';
|
|
8
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.Select = Select;
|
|
37
|
-
exports.SelectContent = SelectContent;
|
|
38
|
-
exports.SelectGroup = SelectGroup;
|
|
39
|
-
exports.SelectItem = SelectItem;
|
|
40
|
-
exports.SelectLabel = SelectLabel;
|
|
41
|
-
exports.SelectScrollDownButton = SelectScrollDownButton;
|
|
42
|
-
exports.SelectScrollUpButton = SelectScrollUpButton;
|
|
43
|
-
exports.SelectSeparator = SelectSeparator;
|
|
44
|
-
exports.SelectTrigger = SelectTrigger;
|
|
45
|
-
exports.SelectValue = SelectValue;
|
|
46
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
47
|
-
const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
|
|
48
|
-
const clsx_1 = require("clsx");
|
|
49
|
-
function Select({ ...props }) {
|
|
50
|
-
return (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { "data-slot": "select", ...props });
|
|
51
|
-
}
|
|
52
|
-
function SelectGroup({ ...props }) {
|
|
53
|
-
return (0, jsx_runtime_1.jsx)(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
|
|
54
|
-
}
|
|
55
|
-
function SelectValue({ ...props }) {
|
|
56
|
-
return (0, jsx_runtime_1.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
|
|
57
|
-
}
|
|
58
|
-
const ChevronDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }));
|
|
59
|
-
const ChevronUpIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }));
|
|
60
|
-
const CheckIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 6 9 17l-5-5" }) }));
|
|
61
|
-
function SelectTrigger({ className, size = 'default', children, ...props }) {
|
|
62
|
-
return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: (0, clsx_1.clsx)("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) })] }));
|
|
63
|
-
}
|
|
64
|
-
function SelectContent({ className, children, position = 'popper', ...props }) {
|
|
65
|
-
return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Content, { "data-slot": "select-content", className: (0, clsx_1.clsx)('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
|
|
66
|
-
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, clsx_1.clsx)('p-1', position === 'popper' &&
|
|
67
|
-
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) }));
|
|
68
|
-
}
|
|
69
|
-
function SelectLabel({ className, ...props }) {
|
|
70
|
-
return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, clsx_1.clsx)('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
|
|
71
|
-
}
|
|
72
|
-
function SelectItem({ className, children, ...props }) {
|
|
73
|
-
return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { "data-slot": "select-item", className: (0, clsx_1.clsx)("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(CheckIcon, {}) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
|
|
74
|
-
}
|
|
75
|
-
function SelectSeparator({ className, ...props }) {
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, clsx_1.clsx)('-mx-1 my-1 h-px bg-muted', className), ...props }));
|
|
77
|
-
}
|
|
78
|
-
function SelectScrollUpButton({ className, ...props }) {
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronUpIcon, {}) }));
|
|
80
|
-
}
|
|
81
|
-
function SelectScrollDownButton({ className, ...props }) {
|
|
82
|
-
return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) }));
|
|
83
|
-
}
|