@anmiles/theme-switcher 1.0.2 → 2.0.0

package/.nycrc.json

@@ -0,0 +1,27 @@
+{
+	"all": true,
+	"check-coverage" : true,
+
+	"statements" : 100,
+	"branches"   : 100,
+	"lines"      : 100,
+	"functions"  : 100,
+
+	"report-dir" : "./coverage",
+	"temp-dir"   : "./coverage",
+
+	"reporter"   : [
+		"text",
+		"html"
+	],
+	"extension": [
+		".js",
+		".mjs",
+		".cjs",
+		".jsx",
+		".ts",
+		".cts",
+		".mts",
+		".tsx"
+	]
+}

package/CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0](../../tags/v2.0.0) - 2025-05-18
+__(BREAKING) Dropped support for NodeJS 18 (EOL). Minimum required version is now NodeJS 20.__
+
+### Changed
+- Migrated to NodeJS 20.19
+- Migrated to ESLint V9 flat configs
+- Updated dependencies
+- Optimized size of static bundle (5.7Kb vs. 12.3Kb)
+
 ## [1.0.2](../../tags/v1.0.2) - 2024-12-15
 ### Changed
 - Update dist files
@@ -13,6 +22,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - First official release
 
-## [0.1.0] - 2024-11-30
+## 0.1.0 - 2024-11-30
 ### Added
 - First version (not covered by unit tests; not released on NPM for now)

package/README.md

@@ -9,80 +9,80 @@ Theme switcher for websites
 ### For React+TS project
 
 1. Install package:
-    ```bash
-    npm install @anmiles/theme-switcher
-    ```
+	```bash
+	npm install @anmiles/theme-switcher
+	```
 
 2. Import component:
-    ```ts
-    import { ThemeSwitcher } from '@anmiles/theme-switcher';
-    ```
+	```ts
+	import { ThemeSwitcher } from '@anmiles/theme-switcher';
+	```
 
 3. Use component:
-    ```ts
-    <ThemeSwitcher float="right" />
-    ```
-    where
-    - `float` _(optional)_ - position of icon and dropdown box
+	```ts
+	<ThemeSwitcher float="right" />
+	```
+	where
+	- `float` _(optional)_ - position of icon and dropdown box
 
 ### For static HTML website
 
 1. Install package:
-    ```bash
-    npm install @anmiles/theme-switcher
-    ```
+	```bash
+	npm install @anmiles/theme-switcher
+	```
 
 2. Copy all files from `dist` into the target website.
 
 4. Create HTML container for theme switcher:
 
-    ```html
-    <div class="my-selector"></div>
-    ```
+	```html
+	<div class="my-selector"></div>
+	```
 
 5. Include React library and theme switcher:
 
-    ### Development
+	### Development
 
-    ```html
-    <script type="text/javascript" src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
-    <script type="text/javascript" src="./theme-switcher-1.0.2.js"></script>
-    ```
+	```html
+	<script type="text/javascript" src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
+	<script type="text/javascript" src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+	<script type="text/javascript" src="./theme-switcher-1.0.2.js"></script>
+	```
 
-    ### Production
+	### Production
 
-    ```html
-    <script type="text/javascript" src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-    <script type="text/javascript" src="./theme-switcher-1.0.2.min.js"></script>
-    ```
+	```html
+	<script type="text/javascript" src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+	<script type="text/javascript" src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+	<script type="text/javascript" src="./theme-switcher-1.0.2.min.js"></script>
+	```
 
 6. Place theme switcher into container:
 
-    ```html
-    <script type="text/javascript">
-        new ThemeSwitcher({ float: 'right' })
-            .render(document.querySelector('.my-selector'));
-    </script>
-    ```
-    where
-    - `float` _(optional)_ - position of icon and dropdown box
+	```html
+	<script type="text/javascript">
+		new ThemeSwitcher({ float: 'right' })
+			.render(document.querySelector('.my-selector'));
+	</script>
+	```
+	where
+	- `float` _(optional)_ - position of icon and dropdown box
 
 ## Usage
 
 Use selectors to write theme-specific styles:
 
 ```css
-    body[data-theme="light"] .selector {
-        /* css rules */
-    }
+	body[data-theme="light"] .selector {
+		/* css rules */
+	}
 ```
 
 ```css
-    body[data-theme="dark"] .selector {
-        /* css rules */
-    }
+	body[data-theme="dark"] .selector {
+		/* css rules */
+	}
 ```
 
 Or you can just write default styles for light theme and override them for dark theme using `body[data-theme="dark"]`.

package/cspell.json

@@ -0,0 +1,18 @@
+{
+	"version": "0.2",
+	"enabled": true,
+	"language": "en",
+	"minWordLength": 4,
+	"enableGlobDot": true,
+	"useGitignore": true,
+	"ignorePaths": [
+		".git",
+		"package-lock.json"
+	],
+	"words": [
+		"anmiles",
+		"anatoliy",
+		"oblaukhov"
+	],
+	"flagWords": []
+}

package/dist/theme-switcher-2.0.0.js

@@ -0,0 +1,307 @@
+var ThemeSwitcher = function(exports, require$$0, require$$0$1) {
+  "use strict";
+  var __vite_style__ = document.createElement("style");
+  __vite_style__.textContent = '.themeSwitcher {\n	cursor: pointer;\n	position: relative;\n}\n\n.themeSwitcher > svg:hover,\n.themeSwitcher li:hover {\n	filter: brightness(1.5);\n}\n\n.themeSwitcher svg {\n	width: 2em;\n	height: 2em;\n	stroke: currentColor;\n	display: block;\n}\n\n.themeSwitcher ul {\n	list-style-type: none;\n	position: absolute;\n	left: 0;\n	margin: 0.5em 0;\n	padding: 0;\n	gap: 0;\n	overflow-y: visible;\n	z-index: 1;\n}\n\n.themeSwitcher li {\n	padding: 0.5em 1em;\n}\n\n.themeSwitcher[data-float="right"] ul {\n	left: auto;\n	right: 0;\n}\n\n.themeSwitcher li {\n	display: flex;\n	align-items: center;\n	gap: 0.5em;\n}\n\n.themeSwitcher li svg {\n	width: 1.5em;\n	height: 1.5em;\n}\n\n.themeSwitcher svg.checked {\n	width: 16px;\n	height: 13.5px;\n}\n/*$vite$:1*/';
+  document.head.appendChild(__vite_style__);
+  var jsxRuntime = { exports: {} };
+  var reactJsxRuntime_production_min = {};
+  /**
+   * @license React
+   * react-jsx-runtime.production.min.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var hasRequiredReactJsxRuntime_production_min;
+  function requireReactJsxRuntime_production_min() {
+    if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+    hasRequiredReactJsxRuntime_production_min = 1;
+    var f = require$$0, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
+    function q(c, a, g) {
+      var b, d = {}, e = null, h = null;
+      void 0 !== g && (e = "" + g);
+      void 0 !== a.key && (e = "" + a.key);
+      void 0 !== a.ref && (h = a.ref);
+      for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+      if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
+      return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+    }
+    reactJsxRuntime_production_min.Fragment = l;
+    reactJsxRuntime_production_min.jsx = q;
+    reactJsxRuntime_production_min.jsxs = q;
+    return reactJsxRuntime_production_min;
+  }
+  var hasRequiredJsxRuntime;
+  function requireJsxRuntime() {
+    if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+    hasRequiredJsxRuntime = 1;
+    {
+      jsxRuntime.exports = requireReactJsxRuntime_production_min();
+    }
+    return jsxRuntime.exports;
+  }
+  var jsxRuntimeExports = requireJsxRuntime();
+  var client = {};
+  var hasRequiredClient;
+  function requireClient() {
+    if (hasRequiredClient) return client;
+    hasRequiredClient = 1;
+    var m = require$$0$1;
+    {
+      client.createRoot = m.createRoot;
+      client.hydrateRoot = m.hydrateRoot;
+    }
+    return client;
+  }
+  var clientExports = requireClient();
+  class EventEmitter {
+    constructor() {
+      this.listeners = {};
+    }
+    on(event, listener) {
+      var _a;
+      const listeners = (_a = this.listeners)[event] ?? (_a[event] = []);
+      listeners.push(listener);
+    }
+    off(event, listener) {
+      var _a;
+      const listeners = (_a = this.listeners)[event] ?? (_a[event] = []);
+      listeners.splice(listeners.indexOf(listener), 1);
+    }
+    emit(event, ...data) {
+      var _a;
+      (_a = this.listeners[event]) == null ? void 0 : _a.forEach((listener) => {
+        listener(...data);
+      });
+    }
+  }
+  const themes = ["light", "dark"];
+  const defaultTheme = "light";
+  function isTheme(arg) {
+    return typeof arg === "string" && themes.map(String).includes(arg);
+  }
+  function getThemeName(theme) {
+    switch (theme) {
+      case "light":
+        return "Light";
+      case "dark":
+        return "Dark";
+      case void 0:
+      default:
+        return "System";
+    }
+  }
+  class SystemProvider extends EventEmitter {
+    get() {
+      if (!("matchMedia" in window)) {
+        return defaultTheme;
+      }
+      for (const theme of themes) {
+        const mediaQueryList = window.matchMedia(`(prefers-color-scheme: ${theme})`);
+        if (mediaQueryList.matches) {
+          return theme;
+        }
+      }
+      return defaultTheme;
+    }
+    watch() {
+      if (!("matchMedia" in window)) {
+        return;
+      }
+      for (const theme of themes) {
+        const mediaQueryList = window.matchMedia(`(prefers-color-scheme: ${theme})`);
+        mediaQueryList.addEventListener("change", (ev) => {
+          if (ev.matches) {
+            this.emit("change", theme);
+          }
+        });
+      }
+    }
+  }
+  class UserProvider extends EventEmitter {
+    constructor() {
+      super(...arguments);
+      this.storageKey = "theme";
+    }
+    get() {
+      const theme = localStorage.getItem(this.storageKey);
+      return isTheme(theme) ? theme : void 0;
+    }
+    set(theme) {
+      if (theme) {
+        localStorage.setItem(this.storageKey, theme);
+      } else {
+        localStorage.removeItem(this.storageKey);
+      }
+      this.emit("change", theme);
+    }
+  }
+  function Dark() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "svg",
+      {
+        viewBox: "0 0 100 100",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "dark",
+        strokeWidth: "8",
+        strokeLinecap: "round",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "50", cy: "50", r: "46", strokeDasharray: "180", transform: "rotate(22.5 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "75", cy: "25", r: "46", strokeDasharray: "108 200", transform: "rotate(67.5 75 25)" })
+        ]
+      }
+    );
+  }
+  function Light() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "svg",
+      {
+        viewBox: "0 0 100 100",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "light",
+        strokeWidth: "8",
+        strokeLinecap: "round",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "50", cy: "50", r: "20" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 10", transform: "rotate(0 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 10", transform: "rotate(90 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 10", transform: "rotate(180 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 10", transform: "rotate(270 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 15", transform: "rotate(45 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 15", transform: "rotate(135 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 15", transform: "rotate(225 50 50)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M 50 86 v 15", transform: "rotate(315 50 50)" })
+        ]
+      }
+    );
+  }
+  function System() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "svg",
+      {
+        viewBox: "0 0 100 100",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "system",
+        strokeWidth: "8",
+        strokeLinecap: "round",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "50", cy: "50", r: "46" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              strokeWidth: "0",
+              fill: "currentColor",
+              d: "\n					M 50,0\n						a 50,50,0,1,1,0,100\n					Z"
+            }
+          )
+        ]
+      }
+    );
+  }
+  function Icon({ theme }) {
+    switch (theme) {
+      case "light":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Light, {});
+      case "dark":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Dark, {});
+      case void 0:
+      default:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(System, {});
+    }
+  }
+  function Checked() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "svg",
+      {
+        viewBox: "0 0 640 540",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "checked",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "\n					M 12,370\n						a 40,40,0,0,1,56.56,-56.56\n						l 130,130\n						l 370,-430\n						a 40,40,0,0,1,56.56,56.56\n						l -398.28,458.28\n						a 40,40,0,0,1,-56.56,0\n						l -140,-140\n					Z"
+          }
+        )
+      }
+    );
+  }
+  function ThemeSelector({ currentUserTheme, onListItemClick }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { "data-testid": "theme-selector", children: [...themes, void 0].map((theme) => {
+      const themeName = getThemeName(theme);
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "li",
+        {
+          "data-testid": `theme-item-${themeName.toLowerCase()}`,
+          onClick: () => {
+            onListItemClick(theme);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { theme }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: themeName }),
+            currentUserTheme === theme && /* @__PURE__ */ jsxRuntimeExports.jsx(Checked, {})
+          ]
+        },
+        themeName
+      );
+    }) });
+  }
+  function App({ float }) {
+    const userProvider = require$$0.useMemo(() => new UserProvider(), []);
+    const systemProvider = require$$0.useMemo(() => new SystemProvider(), []);
+    const [userTheme, setUserTheme] = require$$0.useState(userProvider.get());
+    const [systemTheme, setSystemTheme] = require$$0.useState(systemProvider.get());
+    const [showList, setShowList] = require$$0.useState(false);
+    const theme = userTheme ?? systemTheme;
+    require$$0.useEffect(() => {
+      document.body.setAttribute("data-theme", theme);
+      userProvider.on("change", setUserTheme);
+      systemProvider.on("change", setSystemTheme);
+      systemProvider.watch();
+    }, [theme, userProvider, systemProvider]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "themeSwitcher",
+        "data-testid": "theme-switcher",
+        "data-float": float,
+        onClick: () => {
+          setShowList(!showList);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { theme }),
+          !showList ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ThemeSelector,
+            {
+              currentUserTheme: userTheme,
+              onListItemClick: (theme2) => {
+                userProvider.set(theme2);
+                setShowList(false);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  class Element {
+    constructor(props) {
+      this.props = props;
+    }
+    render(parentNode) {
+      const root = clientExports.createRoot(parentNode);
+      root.render(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(require$$0.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, { ...this.props }) })
+      );
+    }
+  }
+  exports.Element = Element;
+  exports.ThemeSwitcher = App;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  return exports;
+}({}, React, ReactDOM);

package/dist/theme-switcher-2.0.0.min.js

@@ -0,0 +1,22 @@
+var ThemeSwitcher=function(d,c,T){"use strict";var y=document.createElement("style");y.textContent=`.themeSwitcher{cursor:pointer;position:relative}.themeSwitcher>svg:hover,.themeSwitcher li:hover{filter:brightness(1.5)}.themeSwitcher svg{width:2em;height:2em;stroke:currentColor;display:block}.themeSwitcher ul{list-style-type:none;position:absolute;left:0;margin:.5em 0;padding:0;gap:0;overflow-y:visible;z-index:1}.themeSwitcher li{padding:.5em 1em}.themeSwitcher[data-float=right] ul{left:auto;right:0}.themeSwitcher li{display:flex;align-items:center;gap:.5em}.themeSwitcher li svg{width:1.5em;height:1.5em}.themeSwitcher svg.checked{width:16px;height:13.5px}
+/*$vite$:1*/`,document.head.appendChild(y);var w={exports:{}},m={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var j;function C(){if(j)return m;j=1;var s=c,e=Symbol.for("react.element"),r=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,i=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,g={key:!0,ref:!0,__self:!0,__source:!0};function p(h,o,l){var a,x={},v=null,E=null;l!==void 0&&(v=""+l),o.key!==void 0&&(v=""+o.key),o.ref!==void 0&&(E=o.ref);for(a in o)n.call(o,a)&&!g.hasOwnProperty(a)&&(x[a]=o[a]);if(h&&h.defaultProps)for(a in o=h.defaultProps,o)x[a]===void 0&&(x[a]=o[a]);return{$$typeof:e,type:h,key:v,ref:E,props:x,_owner:i.current}}return m.Fragment=r,m.jsx=p,m.jsxs=p,m}var S;function b(){return S||(S=1,w.exports=C()),w.exports}var t=b(),u={},k;function O(){if(k)return u;k=1;var s=T;return u.createRoot=s.createRoot,u.hydrateRoot=s.hydrateRoot,u}var N=O();class _{constructor(){this.listeners={}}on(e,r){var i;((i=this.listeners)[e]??(i[e]=[])).push(r)}off(e,r){var i;const n=(i=this.listeners)[e]??(i[e]=[]);n.splice(n.indexOf(r),1)}emit(e,...r){var n;(n=this.listeners[e])==null||n.forEach(i=>{i(...r)})}}const f=["light","dark"],R="light";function P(s){return typeof s=="string"&&f.map(String).includes(s)}function I(s){switch(s){case"light":return"Light";case"dark":return"Dark";case void 0:default:return"System"}}class D extends _{get(){if(!("matchMedia"in window))return R;for(const e of f)if(window.matchMedia(`(prefers-color-scheme: ${e})`).matches)return e;return R}watch(){if("matchMedia"in window)for(const e of f)window.matchMedia(`(prefers-color-scheme: ${e})`).addEventListener("change",n=>{n.matches&&this.emit("change",e)})}}class B extends _{constructor(){super(...arguments),this.storageKey="theme"}get(){const e=localStorage.getItem(this.storageKey);return P(e)?e:void 0}set(e){e?localStorage.setItem(this.storageKey,e):localStorage.removeItem(this.storageKey),this.emit("change",e)}}function J(){return t.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"dark",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[t.jsx("circle",{cx:"50",cy:"50",r:"46",strokeDasharray:"180",transform:"rotate(22.5 50 50)"}),t.jsx("circle",{cx:"75",cy:"25",r:"46",strokeDasharray:"108 200",transform:"rotate(67.5 75 25)"})]})}function U(){return t.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"light",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[t.jsx("circle",{cx:"50",cy:"50",r:"20"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(0 50 50)"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(90 50 50)"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(180 50 50)"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(270 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(45 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(135 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(225 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(315 50 50)"})]})}function W(){return t.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"system",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[t.jsx("circle",{cx:"50",cy:"50",r:"46"}),t.jsx("path",{strokeWidth:"0",fill:"currentColor",d:`
+					M 50,0
+						a 50,50,0,1,1,0,100
+					Z`})]})}function M({theme:s}){switch(s){case"light":return t.jsx(U,{});case"dark":return t.jsx(J,{});case void 0:default:return t.jsx(W,{})}}function K(){return t.jsx("svg",{viewBox:"0 0 640 540",xmlns:"http://www.w3.org/2000/svg",className:"checked",children:t.jsx("path",{fill:"currentColor",d:`
+					M 12,370
+						a 40,40,0,0,1,56.56,-56.56
+						l 130,130
+						l 370,-430
+						a 40,40,0,0,1,56.56,56.56
+						l -398.28,458.28
+						a 40,40,0,0,1,-56.56,0
+						l -140,-140
+					Z`})})}function Q({currentUserTheme:s,onListItemClick:e}){return t.jsx("ul",{"data-testid":"theme-selector",children:[...f,void 0].map(r=>{const n=I(r);return t.jsxs("li",{"data-testid":`theme-item-${n.toLowerCase()}`,onClick:()=>{e(r)},children:[t.jsx(M,{theme:r}),t.jsx("span",{children:n}),s===r&&t.jsx(K,{})]},n)})})}function L({float:s}){const e=c.useMemo(()=>new B,[]),r=c.useMemo(()=>new D,[]),[n,i]=c.useState(e.get()),[g,p]=c.useState(r.get()),[h,o]=c.useState(!1),l=n??g;return c.useEffect(()=>{document.body.setAttribute("data-theme",l),e.on("change",i),r.on("change",p),r.watch()},[l,e,r]),t.jsxs("div",{className:"themeSwitcher","data-testid":"theme-switcher","data-float":s,onClick:()=>{o(!h)},children:[t.jsx(M,{theme:l}),h?t.jsx(Q,{currentUserTheme:n,onListItemClick:a=>{e.set(a),o(!1)}}):null]})}class A{constructor(e){this.props=e}render(e){N.createRoot(e).render(t.jsx(c.StrictMode,{children:t.jsx(L,{...this.props})}))}}return d.Element=A,d.ThemeSwitcher=L,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({},React,ReactDOM);

package/eslint.config.mts

@@ -0,0 +1,16 @@
+import { configs } from '@anmiles/eslint-config';
+import type { Linter } from 'eslint';
+
+export default [
+	...configs.base,
+	...configs.ts,
+	...configs.jest,
+	...configs.react,
+
+	{
+		ignores: [
+			'coverage/*',
+			'dist/*',
+		],
+	},
+] as Linter.Config[];

package/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Theme switcher</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="https://dev.anmiles.net/index.css" type="text/css">
+	<link rel="icon" href="https://dev.anmiles.net/favicon.ico" type="image/x-icon">
+	<style type="text/css">
+		.theme {
+			cursor: pointer;
+			float: right;
+		}
+	</style>
+</head>
+<body>
+
+<div class="top">
+	<div class="theme"></div>
+</div>
+
+<div class="box">
+
+	<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward. Danger nearer length oppose really add now either. But ask regret eat branch fat garden. Become am he except wishes. Past so at door we walk want such sang. Feeling colonel get her garrets own.</p>
+
+	<p>Boisterous he on understood attachment as entreaties ye devonshire. In mile an form snug were been sell. Hastened admitted joy nor absolute gay its. Extremely ham any his departure for contained curiosity defective. Way now instrument had eat diminution melancholy expression sentiments stimulated. One built fat you out manor books. Mrs interested now his affronting inquietude contrasted cultivated. Lasting showing expense greater on colonel no.</p>
+
+	<p>Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.</p>
+
+</div>
+
+<script type="module">
+	import * as ThemeSwitcher from '/src/index.tsx';
+
+	new ThemeSwitcher.Element({ float: 'right' }).render(document.querySelector('.theme'));
+</script>
+
+</body>
+</html>

package/jest.config.js

@@ -1,26 +1,24 @@
 module.exports = {
-	preset    : 'ts-jest',
-	transform : {
-		'^.+\\.tsx?$' : [
-			'ts-jest',
-			{
-				tsconfig : '<rootDir>/tsconfig.test.json',
-			},
-		],
+	preset   : 'ts-jest',
+	transform: {
+		'^.+\\.tsx?$': [ 'ts-jest', {
+			tsconfig: './tsconfig.test.json',
+		} ],
 	},
 
-	clearMocks      : true,
-	testEnvironment : 'jsdom',
+	clearMocks     : true,
+	testEnvironment: 'jsdom',
 
-	roots     : [ '<rootDir>/src' ],
-	testMatch : [ '<rootDir>/src/**/__tests__/*.test.{ts,tsx}' ],
+	roots    : [ '<rootDir>/src' ],
+	testMatch: [ '<rootDir>/src/**/__tests__/*.test.{ts,tsx}' ],
 
-	collectCoverageFrom : [
+	collectCoverageFrom: [
 		'<rootDir>/src/**/*.{ts,tsx}',
 		'!<rootDir>/src/**/__tests__/**',
+		'!<rootDir>/src/**/__mocks__/**',
 	],
 
-	moduleNameMapper : {
-		'\\.(css|less)$' : '<rootDir>/src/__mocks__/css.ts',
+	moduleNameMapper: {
+		'\\.(css|less)$': '<rootDir>/src/__mocks__/css.ts',
 	},
 };