@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
39 lines • 2.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Select, MenuItem, FormControl, InputLabel, Box, IconButton, Tooltip, } from '@mui/material';
import { LightMode, DarkMode, Palette, AutoAwesome } from '@mui/icons-material';
import { useTheme } from '../../theme/ThemeProvider';
const themeOptions = [
{ value: 'light', label: 'Light', icon: _jsx(LightMode, {}) },
{ value: 'dark', label: 'Dark', icon: _jsx(DarkMode, {}) },
{ value: 'neumorphism-light', label: 'Neumorphism Light', icon: _jsx(Palette, {}) },
{ value: 'neumorphism-dark', label: 'Neumorphism Dark', icon: _jsx(AutoAwesome, {}) },
];
export const ThemeSelector = ({ variant = 'dropdown', label = 'Theme', size = 'medium', value, onChange, }) => {
// Wrap useTheme in try-catch to handle cases where ThemeProvider is not available
let themeContext;
try {
themeContext = useTheme();
}
catch (error) {
console.error('ThemeSelector: useTheme hook failed. Make sure ThemeSelector is wrapped in ThemeProvider:', error);
return (_jsx(Box, { p: 2, border: 1, borderColor: "error.main", borderRadius: 1, children: "Error: ThemeSelector must be used within a ThemeProvider" }));
}
// Use controlled props if provided, otherwise use context
const currentMode = value !== undefined ? value : themeContext.mode;
const handleThemeChange = onChange || themeContext.setTheme;
const handleChange = (newMode) => {
try {
handleThemeChange(newMode);
}
catch (error) {
console.error('ThemeSelector: Failed to set theme:', error);
}
};
if (variant === 'icons') {
return (_jsx(Box, { display: "flex", gap: 0.5, children: themeOptions.map((option) => (_jsx(Tooltip, { title: option.label, arrow: true, children: _jsx(IconButton, { size: size, onClick: () => handleChange(option.value), color: currentMode === option.value ? 'primary' : 'default', sx: {
backgroundColor: currentMode === option.value ? 'action.selected' : 'transparent',
}, children: option.icon }) }, option.value))) }));
}
return (_jsxs(FormControl, { size: size, sx: { minWidth: 180 }, children: [_jsx(InputLabel, { id: "theme-selector-label", children: label }), _jsx(Select, { labelId: "theme-selector-label", value: currentMode, label: label, onChange: (event) => handleChange(event.target.value), children: themeOptions.map((option) => (_jsx(MenuItem, { value: option.value, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [option.icon, option.label] }) }, option.value))) })] }));
};
//# sourceMappingURL=ThemeSelector.js.map