@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.
Files changed (60) hide show
  1. package/README.md +90 -464
  2. package/dist/core/index.cjs +74 -0
  3. package/dist/core/index.cjs.map +1 -0
  4. package/dist/{esm/types/index.d.ts → core/index.d.cts} +30 -12
  5. package/dist/{cjs/types → core}/index.d.ts +30 -12
  6. package/dist/core/index.js +66 -0
  7. package/dist/core/index.js.map +1 -0
  8. package/dist/index.cjs +1756 -0
  9. package/dist/index.cjs.map +1 -0
  10. package/dist/index.d.cts +4 -0
  11. package/dist/index.d.ts +4 -0
  12. package/dist/index.js +1706 -0
  13. package/dist/index.js.map +1 -0
  14. package/dist/react/index.cjs +1742 -0
  15. package/dist/react/index.cjs.map +1 -0
  16. package/dist/react/index.d.cts +224 -0
  17. package/dist/react/index.d.ts +224 -0
  18. package/dist/react/index.js +1697 -0
  19. package/dist/react/index.js.map +1 -0
  20. package/dist/tanstack/index.cjs +34 -0
  21. package/dist/tanstack/index.cjs.map +1 -0
  22. package/dist/tanstack/index.d.cts +20 -0
  23. package/dist/tanstack/index.d.ts +20 -0
  24. package/dist/tanstack/index.js +27 -0
  25. package/dist/tanstack/index.js.map +1 -0
  26. package/package.json +66 -37
  27. package/dist/cjs/components/SpacemanThemeProvider.d.ts +0 -57
  28. package/dist/cjs/components/SpacemanThemeProvider.js +0 -113
  29. package/dist/cjs/components/ThemeSelector.d.ts +0 -3
  30. package/dist/cjs/components/ThemeSelector.js +0 -39
  31. package/dist/cjs/components/ThemeSwitcher.d.ts +0 -3
  32. package/dist/cjs/components/ThemeSwitcher.js +0 -81
  33. package/dist/cjs/components/ViteThemeProvider.d.ts +0 -38
  34. package/dist/cjs/components/ViteThemeProvider.js +0 -117
  35. package/dist/cjs/components/ui/select.d.ts +0 -15
  36. package/dist/cjs/components/ui/select.js +0 -83
  37. package/dist/cjs/hooks/use-theme-animation.d.ts +0 -2
  38. package/dist/cjs/hooks/use-theme-animation.js +0 -234
  39. package/dist/cjs/index.d.ts +0 -8
  40. package/dist/cjs/index.js +0 -23
  41. package/dist/cjs/types/index.js +0 -9
  42. package/dist/cjs/utils/animations.d.ts +0 -21
  43. package/dist/cjs/utils/animations.js +0 -189
  44. package/dist/esm/components/SpacemanThemeProvider.d.ts +0 -57
  45. package/dist/esm/components/SpacemanThemeProvider.js +0 -108
  46. package/dist/esm/components/ThemeSelector.d.ts +0 -3
  47. package/dist/esm/components/ThemeSelector.js +0 -35
  48. package/dist/esm/components/ThemeSwitcher.d.ts +0 -3
  49. package/dist/esm/components/ThemeSwitcher.js +0 -77
  50. package/dist/esm/components/ViteThemeProvider.d.ts +0 -38
  51. package/dist/esm/components/ViteThemeProvider.js +0 -112
  52. package/dist/esm/components/ui/select.d.ts +0 -15
  53. package/dist/esm/components/ui/select.js +0 -39
  54. package/dist/esm/hooks/use-theme-animation.d.ts +0 -2
  55. package/dist/esm/hooks/use-theme-animation.js +0 -230
  56. package/dist/esm/index.d.ts +0 -8
  57. package/dist/esm/index.js +0 -7
  58. package/dist/esm/types/index.js +0 -6
  59. package/dist/esm/utils/animations.d.ts +0 -21
  60. 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,3 +0,0 @@
1
- import React from 'react';
2
- import { ThemeSelectorProps } from '../types';
3
- export declare const ThemeSelector: React.FC<ThemeSelectorProps>;
@@ -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,3 +0,0 @@
1
- import React from 'react';
2
- import { ThemeSwitcherProps } from '../types';
3
- export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;
@@ -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
- }
@@ -1,2 +0,0 @@
1
- import { UseThemeAnimationProps, UseThemeAnimationReturn } from '../types';
2
- export declare const useThemeAnimation: (props?: UseThemeAnimationProps) => UseThemeAnimationReturn;