pragmate-ui/theme-switcher/theme-switcher.amd.js

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.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/form", "pragmate-ui/icons"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.hmr = _exports.__beyond_pkg = _exports.ThemeSwitcher = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/theme-switcher"
    },
    "type": "code"
  }, _amd_module.uri).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');
  const 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"
  }];
  let ThemeSwitcher = _exports.ThemeSwitcher = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'ThemeSwitcher') && (_exports.ThemeSwitcher = ThemeSwitcher = require ? require('./index').ThemeSwitcher : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=theme-switcher.amd.js.map