pragmate-ui
Version:
An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.
105 lines (103 loc) • 4.12 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/form", "pragmate-ui/icons"], function (_export, _context) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, __Bundle, __pkg, ims, ThemeSwitcher, __beyond_pkg, hmr;
_export("ThemeSwitcher", void 0);
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}, function (_pragmateUiForm) {
dependency_3 = _pragmateUiForm;
}, function (_pragmateUiIcons) {
dependency_4 = _pragmateUiIcons;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/theme-switcher"
},
"type": "code"
}, _context.meta.url).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['pragmate-ui/form', dependency_3], ['pragmate-ui/icons', dependency_4]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/theme-switcher');
ims = new Map();
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 1174528906,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThemeSwitcher = ThemeSwitcher;
var _react = require("react");
var _form = require("pragmate-ui/form");
var _icons = require("pragmate-ui/icons");
/*bundle*/
function ThemeSwitcher() {
const theme = globalThis?.matchMedia('(prefers-color-scheme: dark)').matches;
const themeStorage = localStorage.getItem('theme');
const defaultTheme = theme ? 'dark' : 'light';
const userTheme = themeStorage ? themeStorage === 'dark' : defaultTheme === 'dark';
const [isDark, setIsDark] = _react.default.useState(userTheme);
function handleChange({
target
}) {
const container = document.querySelector('html');
const theme = isDark ? 'light' : 'dark';
container.setAttribute('data-beyond-mode', theme);
localStorage.setItem('theme', theme);
setIsDark(target.checked);
}
_react.default.useEffect(() => {
if (!themeStorage) return;
const container = document.querySelector('html');
container.setAttribute('data-beyond-mode', themeStorage);
}, []);
const icon = isDark ? 'moon' : 'sun';
return _react.default.createElement("div", {
className: "theme"
}, _react.default.createElement("div", {
className: "container-theme"
}, _react.default.createElement(_icons.Icon, {
icon: icon
}), _react.default.createElement(_form.Switch, {
className: "checkbox",
checked: isDark,
onChange: handleChange
})));
}
}
});
__pkg.exports.descriptor = [{
"im": "./index",
"from": "ThemeSwitcher",
"name": "ThemeSwitcher"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'ThemeSwitcher') && _export("ThemeSwitcher", ThemeSwitcher = require ? require('./index').ThemeSwitcher : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=theme-switcher.sjs.js.map