zentrixui
Version:
ZentrixUI - A modern, highly customizable and accessible React file upload component library with multiple variants, JSON-based configuration, and excellent developer experience.
120 lines (119 loc) • 3.86 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const theme = require("./chunks/theme-Bz28eVNI.cjs");
const ThemeContext = React.createContext(void 0);
function ThemeProvider({
children,
defaultTheme = "auto",
config,
storageKey = "file-upload-theme"
}) {
const [theme$1, setThemeState] = React.useState(defaultTheme);
const [resolvedTheme, setResolvedTheme] = React.useState("light");
const [themeConfig, setThemeConfig] = React.useState(config);
React.useEffect(() => {
if (typeof window !== "undefined") {
const stored = localStorage.getItem(storageKey);
if (stored && ["light", "dark", "auto"].includes(stored)) {
setThemeState(stored);
}
}
}, [storageKey]);
React.useEffect(() => {
const resolved = theme.resolveTheme(theme$1);
setResolvedTheme(resolved);
theme.applyTheme(theme$1, themeConfig);
}, [theme$1, themeConfig]);
React.useEffect(() => {
if (theme$1 === "auto") {
const cleanup = theme.createThemeWatcher((systemTheme) => {
setResolvedTheme(systemTheme);
theme.applyTheme("auto", themeConfig);
});
return cleanup;
}
}, [theme$1, themeConfig]);
const setTheme = (newTheme) => {
setThemeState(newTheme);
if (typeof window !== "undefined") {
localStorage.setItem(storageKey, newTheme);
}
};
const setConfig = (newConfig) => {
setThemeConfig(newConfig);
};
const value = {
theme: theme$1,
resolvedTheme,
setTheme,
config: themeConfig,
setConfig
};
return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
}
function useTheme() {
const context = React.useContext(ThemeContext);
if (context === void 0) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
}
function useThemeVariables() {
const { config, resolvedTheme } = useTheme();
return React.useMemo(() => {
if (!config?.styling) return {};
const variables = {};
const { colors, spacing, typography, borders, shadows } = config.styling;
if (colors) {
Object.entries(colors).forEach(([key, value]) => {
variables[`--file-upload-${key}`] = value;
});
}
if (spacing) {
Object.entries(spacing).forEach(([key, value]) => {
variables[`--file-upload-spacing-${key}`] = value;
});
}
if (typography) {
Object.entries(typography).forEach(([key, value]) => {
variables[`--file-upload-${key}`] = value;
});
}
if (borders) {
Object.entries(borders).forEach(([key, value]) => {
variables[`--file-upload-border-${key}`] = value;
});
}
if (shadows) {
Object.entries(shadows).forEach(([key, value]) => {
variables[`--file-upload-shadow-${key}`] = value;
});
}
return variables;
}, [config, resolvedTheme]);
}
function ThemeToggle({ className, children }) {
const { theme: theme2, setTheme } = useTheme();
const toggleTheme = () => {
const themes = ["light", "dark", "auto"];
const currentIndex = themes.indexOf(theme2);
const nextIndex = (currentIndex + 1) % themes.length;
setTheme(themes[nextIndex]);
};
return /* @__PURE__ */ jsxRuntime.jsx(
"button",
{
onClick: toggleTheme,
className,
"aria-label": `Switch to ${theme2 === "light" ? "dark" : theme2 === "dark" ? "auto" : "light"} theme`,
children: children || /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme2 === "light" ? "🌙" : theme2 === "dark" ? "🌓" : "☀️" })
}
);
}
exports.ThemeProvider = ThemeProvider;
exports.ThemeToggle = ThemeToggle;
exports.useTheme = useTheme;
exports.useThemeVariables = useThemeVariables;
//# sourceMappingURL=theme.cjs.map