colbrush 1.2.0 → 1.4.0

package/README.md

@@ -89,16 +89,15 @@ function Settings() {
 ```
 ### 5. Use hooks for theme and language switching
 ```
-import { useUpdateLanguage, useUpdateTheme } from 'colbrush/client';
+import { useTheme } from 'colbrush/client';
 
 export default function TestPage() {
-    const updateTheme = useUpdateTheme();
-    const updateLanguage = useUpdateLanguage();
+    const { theme, updateTheme, language, updateLanguage } = useTheme();
 
     return (
         <div className="flex">
-            <button onClick={() => updateTheme('tritanopia')}>색맹 유형 변경</button>
-            <button onClick={() => updateLanguage('English')}>언어 변경</button>
+            <button onClick={() => updateTheme('tritanopia')}>Change to tritanopia</button>
+            <button onClick={() => updateLanguage('English')}>Change to English</button>
         </div>
     );
 }
@@ -128,3 +127,4 @@ The above copyright notice and this permission notice shall be included in all c
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+

package/dist/cli.cjs

@@ -23,7 +23,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// src/node/parseFlags.ts
+// src/cli/parseFlags.ts
 function parseFlags(argv = process.argv.slice(2)) {
   const out = { _: [] };
   for (const s of argv) {
@@ -35,19 +35,19 @@ function parseFlags(argv = process.argv.slice(2)) {
   return out;
 }
 
-// src/constants/regex.ts
+// src/core/constants/regex.ts
 var variableRegex = /(--color-[\w-]+):\s*(#[0-9a-fA-F]{3,8})/g;
 var variationRegex = /^--(.+?)-(50|100|200|300|400|500|600|700|800|900)$/i;
 
-// src/node/applyThemes.ts
+// src/cli/applyThemes.ts
 var import_node_fs = __toESM(require("fs"), 1);
 var import_postcss = __toESM(require("postcss"), 1);
 var import_postcss_safe_parser = __toESM(require("postcss-safe-parser"), 1);
 
-// src/utils/core/colorScale.ts
+// src/core/utils/colorScale.ts
 var import_colorjs = __toESM(require("colorjs.io"), 1);
 
-// src/constants/variation.ts
+// src/core/constants/variation.ts
 var DEFAULT_KEYS = [
   "50",
   "100",
@@ -73,7 +73,7 @@ var DEFAULT_SCALE = {
   "900": { dL: -0.3, cMul: 0.88 }
 };
 
-// src/utils/core/colorScale.ts
+// src/core/utils/colorScale.ts
 var CLAMP01 = (x) => Math.max(0, Math.min(1, x));
 function hexToOKLCH(hex) {
   const c = new import_colorjs.default(hex);
@@ -103,11 +103,8 @@ function buildScaleFromBaseHex(baseHex, opts) {
   return out;
 }
 
-// src/node/applyThemes.ts
+// src/cli/applyThemes.ts
 var CSS_PATH = "src/index.css";
-function toThemeColor(hex, _vision) {
-  return hex;
-}
 function loadRoot(cssPath = CSS_PATH) {
   const css = import_node_fs.default.readFileSync(cssPath, "utf8");
   return (0, import_postcss.default)().process(css, { parser: import_postcss_safe_parser.default }).root;
@@ -152,7 +149,7 @@ function getColorVariablesFromRoot(root) {
   });
   return vars;
 }
-function applyThemes(input, cssPath = CSS_PATH) {
+function applyThemes(input, cssPath = CSS_PATH, opts) {
   const root = loadRoot(cssPath);
   const originalVars = getColorVariablesFromRoot(root);
   const varsForTheme = {};
@@ -167,27 +164,31 @@ function applyThemes(input, cssPath = CSS_PATH) {
       const [, token] = m;
       const keys = rich.keys && rich.keys.length ? rich.keys : getExistingKeysForToken(root, token).length ? getExistingKeysForToken(root, token) : Array.from(DEFAULT_KEYS);
       if (rich.scale !== false) {
-        const scaleMap = buildScaleFromBaseHex(rich.base, { keys });
+        const scaleMap = buildScaleFromBaseHex(rich.base, {
+          keys
+        });
         for (const k of keys) {
           const hex = scaleMap[k];
-          varsForTheme[`--${token}-${k}`] = toThemeColor(hex, input.vision);
+          varsForTheme[`--${token}-${k}`] = hex;
         }
       } else {
-        varsForTheme[varName] = toThemeColor(rich.base, input.vision);
+        varsForTheme[varName] = rich.base;
       }
     } else {
-      varsForTheme[varName] = toThemeColor(rich.base, input.vision);
+      varsForTheme[varName] = rich.base;
     }
   }
   upsertBlock(root, `[data-theme='${input.vision}']`, varsForTheme);
   import_node_fs.default.writeFileSync(cssPath, root.toString(), "utf8");
-  console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
+  if (!opts?.silent) {
+    console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
+  }
 }
 function inferRich(varName, baseHex) {
   return variationRegex.test(varName) ? { base: baseHex, scale: true } : { base: baseHex, scale: false };
 }
 
-// src/node/colorTransform.ts
+// src/cli/colorTransform.ts
 var import_chroma_js = __toESM(require("chroma-js"), 1);
 var import_color_blind = __toESM(require("color-blind"), 1);
 var THRESHOLD = 10;
@@ -199,7 +200,10 @@ function generateCandidates(hex) {
   candidates[0] = hex;
   for (let i = 1; i <= CANDIDATE_COUNT / 2; i++) {
     candidates[i * 2 - 1] = (0, import_chroma_js.default)(hex).set("hcl.h", (baseHue + HUE_STEP / CANDIDATE_COUNT * i) % 360).hex();
-    candidates[i * 2] = (0, import_chroma_js.default)(hex).set("hcl.h", (baseHue - HUE_STEP / CANDIDATE_COUNT * i + 360) % 360).hex();
+    candidates[i * 2] = (0, import_chroma_js.default)(hex).set(
+      "hcl.h",
+      (baseHue - HUE_STEP / CANDIDATE_COUNT * i + 360) % 360
+    ).hex();
   }
   return candidates;
 }
@@ -213,7 +217,7 @@ function findOptimalColorCombination(colorKeys, baseColorsArray, candidateList,
     case "protanopia":
       blind = import_color_blind.default.protanopia;
       break;
-    // 녹색맹 
+    // 녹색맹
     case "deuteranopia":
       blind = import_color_blind.default.deuteranopia;
       break;
@@ -244,12 +248,15 @@ function findOptimalColorCombination(colorKeys, baseColorsArray, candidateList,
   }
   dfs(0, [], 0);
   const finalColors = bestColors ?? [...baseColorsArray];
-  return colorKeys.reduce((acc, key, idx) => {
-    acc[key] = finalColors[idx];
-    return acc;
-  }, {});
+  return colorKeys.reduce(
+    (acc, key, idx) => {
+      acc[key] = finalColors[idx];
+      return acc;
+    },
+    {}
+  );
 }
-async function requestColorTransformation(variables) {
+function prepareCandidates(variables, progress) {
   const scaleGroups = {};
   const filteredVariables = {};
   for (const key in variables) {
@@ -275,26 +282,30 @@ async function requestColorTransformation(variables) {
   }
   const colorKeys = Object.keys(filteredVariables);
   const baseColorsArray = Object.values(filteredVariables).map((v) => v.base);
-  const candidateList = baseColorsArray.map((color) => {
-    return generateCandidates(color);
-  });
-  const colors_d = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "deuteranopia");
-  const colors_p = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "protanopia");
-  const colors_t = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "tritanopia");
-  const visions = ["deuteranopia", "protanopia", "tritanopia"];
-  const colorsMap = {
-    deuteranopia: colors_d,
-    protanopia: colors_p,
-    tritanopia: colors_t
-  };
-  const themes = visions.map((vision) => ({
-    vision,
-    variables: Object.entries(colorsMap[vision]).reduce((acc, [varName, baseHex]) => {
+  progress?.startSection("Generate candidates");
+  const candidateList = [];
+  for (let i = 0; i < baseColorsArray.length; i++) {
+    candidateList[i] = generateCandidates(baseColorsArray[i]);
+    progress?.update((i + 1) / baseColorsArray.length * 100);
+  }
+  progress?.finishSection("Done");
+  return { colorKeys, baseColorsArray, candidateList };
+}
+function buildThemeForVision(colorKeys, baseColorsArray, candidateList, vision) {
+  const colors = findOptimalColorCombination(
+    colorKeys,
+    baseColorsArray,
+    candidateList,
+    vision
+  );
+  const variables = Object.entries(colors).reduce(
+    (acc, [varName, baseHex]) => {
       acc[varName] = inferRich(varName, baseHex);
       return acc;
-    }, {})
-  }));
-  return { themes };
+    },
+    {}
+  );
+  return { vision, variables };
 }
 function getMiddleScaleKey(keys) {
   const scaleNumbers = keys.map((k) => {
@@ -311,16 +322,17 @@ function getMiddleScaleKey(keys) {
 function isValidColors(colors, blind) {
   for (let i = 0; i < colors.length; i++) {
     for (let j = i + 1; j < colors.length; j++) {
-      if (import_chroma_js.default.deltaE(blind(colors[i]), blind(colors[j])) < THRESHOLD) return false;
+      if (import_chroma_js.default.deltaE(blind(colors[i]), blind(colors[j])) < THRESHOLD)
+        return false;
     }
   }
   return true;
 }
 
-// src/node/runThemeApply.ts
+// src/cli/runThemeApply.ts
 var import_node_fs2 = __toESM(require("fs"), 1);
 
-// src/node/removeExistingThemeBlocks.ts
+// src/cli/removeExistingThemeBlocks.ts
 function removeExistingThemeBlocks(content) {
   const visions = ["protanopia", "deuteranopia", "tritanopia"];
   let cleaned = content;
@@ -334,7 +346,7 @@ function removeExistingThemeBlocks(content) {
   return cleaned.trim();
 }
 
-// src/node/runThemeApply.ts
+// src/cli/runThemeApply.ts
 function hexToRgb(hex) {
   let clean = hex.replace("#", "").toLowerCase();
   if (clean.length === 3) {
@@ -368,19 +380,30 @@ function calculateScale(varName, hexColor) {
   }
   return /\d+$/.test(varName);
 }
-async function runThemeApply(cssPath) {
+async function runThemeApply(cssPath, progress) {
   if (!import_node_fs2.default.existsSync(cssPath)) {
     throw new Error(`\u274C CSS \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${cssPath}`);
   }
   let content = import_node_fs2.default.readFileSync(cssPath, "utf8");
+  progress?.startSection("Remove existing theme blocks");
   content = removeExistingThemeBlocks(content);
+  progress?.update(100);
+  progress?.finishSection("Done");
   const variables = {};
+  progress?.startSection("Extract variables");
+  const scanRegex = new RegExp(variableRegex.source, variableRegex.flags);
+  const all = Array.from(content.matchAll(scanRegex));
+  const totalVars = all.length || 1;
+  const loopRegex = new RegExp(variableRegex.source, variableRegex.flags);
   let match;
-  while ((match = variableRegex.exec(content)) !== null) {
+  let count = 0;
+  while ((match = loopRegex.exec(content)) !== null) {
     const [, key, value] = match;
     const cleanKey = key.trim();
     const cleanValue = value.trim().toLowerCase();
     if (isNeutralColor(cleanValue)) {
+      count++;
+      progress?.update(count / totalVars * 100);
       continue;
     }
     const scale = calculateScale(cleanKey, cleanValue);
@@ -389,35 +412,159 @@ async function runThemeApply(cssPath) {
       scale
     };
     variables[cleanKey] = rich;
+    count++;
+    progress?.update(count / totalVars * 100);
   }
+  progress?.finishSection("Done");
   const visions = ["deuteranopia", "protanopia", "tritanopia"];
   try {
-    const algorithmResult = await requestColorTransformation(variables);
-    for (const themeData of algorithmResult.themes) {
-      await applyThemes(themeData, cssPath);
+    const { colorKeys, baseColorsArray, candidateList } = prepareCandidates(
+      variables,
+      progress
+    );
+    for (const vision of visions) {
+      const label = `Process \u2014 ${vision}`;
+      progress?.startSection(label);
+      progress?.update(30, "Optimizing...");
+      const themeData = buildThemeForVision(
+        colorKeys,
+        baseColorsArray,
+        candidateList,
+        vision
+      );
+      progress?.update(70, "Applying CSS...");
+      await applyThemes(themeData, cssPath, { silent: !!progress });
+      progress?.update(100, "Done");
+      progress?.finishSection("Done");
     }
   } catch (error) {
     console.log("\u{1F680} ~ runThemeApply ~ error:", error);
     for (const vision of visions) {
-      await applyThemes({ vision, variables }, cssPath);
+      const label = `Process (fallback) \u2014 ${vision}`;
+      progress?.startSection(label);
+      await applyThemes({ vision, variables }, cssPath, {
+        silent: !!progress
+      });
+      progress?.finishSection("Done");
+    }
+  }
+  console.log(`
+\u2705 Colbrush themes applied to ${cssPath}`);
+}
+
+// src/cli/progress.ts
+function clampPercent(n) {
+  if (Number.isNaN(n)) return 0;
+  return Math.max(0, Math.min(100, n));
+}
+function createCliProgress() {
+  let hasAnyOutput = false;
+  let currentSection = null;
+  let sectionStartedAt = 0;
+  const isTTY = !!process.stdout.isTTY;
+  const A = {
+    reset: "\x1B[0m",
+    // 리셋
+    bold: "\x1B[1m",
+    // 굵게
+    dim: "\x1B[2m",
+    // 흐리게
+    green: "\x1B[32m",
+    // 초록
+    cyan: "\x1B[36m",
+    // 청록
+    clearLine: "\x1B[2K",
+    // 줄 지우기
+    carriage: "\r"
+    // 캐리지 리턴
+  };
+  const style = (code, text) => isTTY ? `${code}${text}${A.reset}` : text;
+  const bold = (t) => style(A.bold, t);
+  const dim = (t) => style(A.dim, t);
+  const green = (t) => style(A.green, t);
+  const cyan = (t) => style(A.cyan, t);
+  function writeSameLine(text) {
+    if (isTTY) {
+      process.stdout.write(A.clearLine + A.carriage + text);
+    } else {
+      console.log(text);
     }
+    hasAnyOutput = true;
+  }
+  function newline() {
+    if (hasAnyOutput) process.stdout.write("\n");
   }
-  console.log(`\u2705 ${cssPath}\uC5D0 \uC0C9\uB9F9 \uD14C\uB9C8\uAC00 \uC801\uC6A9\uB418\uC5C8\uC2B5\uB2C8\uB2E4`);
+  function getTerminalColumns() {
+    const c = typeof process.stdout.columns === "number" ? process.stdout.columns : 80;
+    return Math.max(40, c);
+  }
+  function renderBar(pct) {
+    const columns = getTerminalColumns();
+    const width = Math.max(12, Math.min(30, Math.floor(columns * 0.3)));
+    const filled = Math.round(pct / 100 * width);
+    const fillChar = "\u2588";
+    const emptyChar = "\u2591";
+    const body = fillChar.repeat(filled) + emptyChar.repeat(width - filled);
+    return pct >= 100 ? green(body) : cyan(body);
+  }
+  function render(pctRaw, suffixLabel, opts) {
+    const p = clampPercent(pctRaw);
+    const name = currentSection ? bold(currentSection) : "";
+    const bar = renderBar(p);
+    const percentText = bold(`${p.toFixed(0).padStart(3, " ")}%`);
+    const prefix = isTTY ? `${cyan("\u203A")} ${name ? name + " " : ""}` : name ? name + " " : "";
+    const suffix = suffixLabel ? ` ${opts?.styledSuffix ? suffixLabel : dim(suffixLabel)}` : "";
+    writeSameLine(`${prefix}[${bar}] ${percentText}${suffix}`);
+  }
+  return {
+    startSection(name) {
+      if (currentSection) newline();
+      currentSection = name;
+      sectionStartedAt = Date.now();
+      render(0);
+    },
+    update(percent, label) {
+      if (!currentSection) {
+        currentSection = "";
+        sectionStartedAt = Date.now();
+      }
+      render(percent, label);
+    },
+    finishSection() {
+      if (!currentSection) return;
+      const ms = Date.now() - sectionStartedAt;
+      const secText = (ms / 1e3).toFixed(1) + "s";
+      const doneStyled = `${green("\u2714 Done")} ${dim(`(${secText})`)}`;
+      render(100, doneStyled, { styledSuffix: true });
+      newline();
+      process.stdout.write("\n\n");
+      currentSection = null;
+    },
+    // 하위 호환: 단일 바를 하나의 섹션처럼 취급
+    start(_totalHint, label) {
+      this.startSection(label ?? "");
+    },
+    finish(label) {
+      this.finishSection(label);
+    }
+  };
 }
 
-// src/cli.ts
+// src/cli/index.ts
 async function main() {
   const flags = parseFlags();
   const cmd = flags._[0] ?? "generate";
   const cssPath = typeof flags.css === "string" ? flags.css : "src/index.css";
   if (cmd === "generate") {
-    await runThemeApply(cssPath);
+    const progress = createCliProgress();
+    await runThemeApply(cssPath, progress);
     process.exit(0);
   }
-  console.log(`\uC0AC\uC6A9 \uBC29\uBC95:
-    - cb-theme generate [--css=src/index.css]
-        CSS \uD30C\uC77C\uC5D0\uC11C \uC0C9\uC0C1 \uBCC0\uC218\uB4E4\uC744 \uCD94\uCD9C\uD558\uACE0, \uC0C9\uB9F9 \uD14C\uB9C8\uB97C \uC790\uB3D9 \uC0DD\uC131\uD558\uC5EC \uAC19\uC740 CSS \uD30C\uC77C\uC5D0 \uC801\uC6A9\uD569\uB2C8\uB2E4.
-        (\uAE30\uBCF8 \uACBD\uB85C\uB294 src/index.css)
+  console.log(`Usage:
+    - colbrush generate [--css=src/index.css]
+        Extracts color variables from the CSS file and automatically generates color-blind themes,
+        then applies them to the same CSS file.
+        (Default path: src/index.css)
 `);
   process.exit(1);
 }

package/dist/client.cjs

@@ -0,0 +1,715 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  THEMES: () => THEMES,
+  ThemeProvider: () => ThemeProvider,
+  ThemeSwitcher: () => ThemeSwitcher,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/react/ThemeProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var THEME_KEYS = [
+  "default",
+  "protanopia",
+  "deuteranopia",
+  "tritanopia"
+];
+var THEME_LABEL = {
+  English: {
+    default: "default",
+    protanopia: "protanopia",
+    deuteranopia: "deuteranopia",
+    tritanopia: "tritanopia"
+  },
+  Korean: {
+    default: "\uAE30\uBCF8",
+    protanopia: "\uC801\uC0C9\uB9F9",
+    deuteranopia: "\uB179\uC0C9\uB9F9",
+    tritanopia: "\uCCAD\uC0C9\uB9F9"
+  }
+};
+var getThemeOptions = (lang) => THEME_KEYS.map((key) => ({ key, label: THEME_LABEL[lang][key] }));
+var KEY = "theme";
+var LANG_KEY = "theme_lang";
+var ThemeContext = (0, import_react.createContext)({
+  theme: "default",
+  language: "English",
+  updateTheme: () => {
+  },
+  updateLanguage: () => {
+  }
+});
+var useTheme = () => (0, import_react.useContext)(ThemeContext);
+function normalizeToKey(value) {
+  if (!value) return "default";
+  if (THEME_KEYS.includes(value))
+    return value;
+  const reverse = {};
+  ["English", "Korean"].forEach((lang) => {
+    Object.entries(THEME_LABEL[lang]).forEach(
+      ([k, label]) => {
+        reverse[label] = k;
+      }
+    );
+  });
+  return reverse[value] ?? "default";
+}
+function ThemeProvider({ children }) {
+  const [theme, setTheme] = (0, import_react.useState)("default");
+  const [language, setLanguage] = (0, import_react.useState)("English");
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const storedTheme = normalizeToKey(localStorage.getItem(KEY));
+    const storedLang = localStorage.getItem(LANG_KEY) || "English";
+    setTheme(storedTheme);
+    setLanguage(storedLang);
+    document.documentElement.setAttribute("data-theme", storedTheme);
+  }, []);
+  const updateTheme = (k) => {
+    setTheme(k);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(KEY, k);
+      document.documentElement.setAttribute("data-theme", k);
+    }
+  };
+  const updateLanguage = (t) => {
+    setLanguage(t);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(LANG_KEY, t);
+    }
+  };
+  const value = (0, import_react.useMemo)(
+    () => ({ theme, language, updateTheme, updateLanguage }),
+    [theme, language]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+var THEMES = THEME_LABEL;
+
+// src/react/ThemeSwitcher.tsx
+var import_react3 = require("react");
+
+// src/icons/Logo.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SvgLogo = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 39,
+    height: 40,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#CE78A9", d: "m.5 17.805 1.516-3.514 16.812-7.924-1.309 3.308z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#D55D00",
+          d: "M3.187 24.212 1.05 19.32l14.056-7.097-1.378 3.376-9.233 4.685 2.48 5.72z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#E59F01",
+          d: "m22.276.741 3.496 1.556 7.732 16.901-3.292-1.347z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#000",
+          d: "m15.837 3.355 4.916-2.08L27.69 15.41l-3.36-1.417-4.58-9.285-5.747 2.415z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#0072B1",
+          d: "m17.036 39.246-3.493-1.562-7.699-16.917 3.29 1.354z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#F0E442",
+          d: "m23.477 36.645-4.92 2.07-6.908-14.149 3.357 1.423 4.562 9.295 5.751-2.404z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#009F73",
+          d: "m38.889 22.215-1.482 3.529-16.734 8.087 1.277-3.32z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "#56B4E8",
+          d: "m36.14 15.833 2.184 4.871-13.987 7.233 1.345-3.389 9.187-4.775-2.536-5.694z"
+        }
+      )
+    ]
+  }
+);
+var Logo_default = SvgLogo;
+
+// src/icons/Us.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SvgUs = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 21,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "#fff", d: "M3.996 4.166h20v13.333h-20z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            fill: "#D80027",
+            d: "M3.996 4.166h20v1.025h-20zm0 2.05h20v1.026h-20zm0 2.051h20v1.026h-20zm0 2.051h20v1.025h-20zm0 2.055h20v1.025h-20zm0 2.05h20v1.026h-20zm0 2.051h20v1.025h-20z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "#2E52B2", d: "M3.996 4.166h10v7.177h-10z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            fill: "#fff",
+            d: "m5.86 9.581-.156-.499-.172.5h-.514l.417.3-.156.498.425-.308.413.308-.16-.499.425-.3zm2.195 0-.16-.499-.164.5h-.515l.418.3-.156.498.417-.308.42.308-.155-.499.417-.3zm2.202 0-.167-.499-.156.5h-.527l.43.3-.164.498.417-.308.429.308-.164-.499.417-.3zm2.191 0-.156-.499-.163.5h-.519l.421.3-.156.498.417-.308.422.308-.168-.499.429-.3zm-4.553-2.48-.164.5h-.515l.418.308-.156.49.417-.303.42.304-.155-.491.417-.308h-.522zm-2.191 0-.172.5h-.514l.417.308-.156.49.425-.303.413.304-.16-.491.425-.308H5.86zm4.386 0-.156.5h-.527l.43.308-.164.49.417-.303.429.304-.164-.491.417-.308h-.515zm2.202 0-.163.5h-.519l.421.308-.156.49.417-.303.422.304-.168-.491.429-.308h-.527zM5.704 5.13l-.172.491h-.514l.417.308-.156.495.425-.308.413.308-.16-.495.425-.308H5.86zm2.19 0-.163.491h-.515l.418.308-.156.495.417-.308.42.308-.155-.495.417-.308h-.522zm2.196 0-.156.491h-.527l.43.308-.164.495.417-.308.429.308-.164-.495.417-.308h-.515zm2.202 0-.163.491h-.519l.421.308-.156.495.417-.308.422.308-.168-.495.429-.308h-.527z"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "a", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "#fff", d: "M3.996 4.166h20v13.333h-20z" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "filter",
+          {
+            id: "b",
+            width: 26.973,
+            height: 20.307,
+            x: 0.509,
+            y: 0.679,
+            colorInterpolationFilters: "sRGB",
+            filterUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  result: "hardAlpha",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feOffset", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feGaussianBlur", { stdDeviation: 1.743 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feBlend",
+                {
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow_306_3300"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feBlend",
+                {
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow_306_3300",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+var Us_default = SvgUs;
+
+// src/icons/Kr.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SvgKr = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 17,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fill: "#fff", d: "M1.906 2h20v13.333h-20z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#000",
+            fillRule: "evenodd",
+            d: "m4.959 6.04 1.849-2.774.487.324-1.85 2.773zm.693.461 1.85-2.773.486.324-1.85 2.774zm.694.463L8.195 4.19l.486.324-1.849 2.774zm8.782 5.855 1.85-2.774.486.325-1.849 2.773zm.694.462 1.849-2.774.486.325-1.849 2.773zm3.029-1.987L17 14.068l-.486-.325 1.85-2.773z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#fff",
+            fillRule: "evenodd",
+            d: "m18.01 13.03-2.31-1.542.27-.405 2.31 1.54z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#CA163A",
+            d: "M14.68 10.514a3.333 3.333 0 1 0-5.548-3.698 3.333 3.333 0 0 0 5.547 3.698"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#0E4896",
+            d: "M9.132 6.816a1.667 1.667 0 0 0 2.774 1.85 1.667 1.667 0 0 1 2.773 1.848 3.334 3.334 0 0 1-5.547-3.698"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#000",
+            fillRule: "evenodd",
+            d: "m17.002 3.266 1.849 2.773-.487.325-1.849-2.774zm-.694.462 1.85 2.773-.487.325-1.85-2.774zm-.693.462 1.85 2.774-.488.324-1.848-2.773zm-8.783 5.855 1.85 2.774-.487.324-1.85-2.773zm-.693.463 1.849 2.773-.487.324-1.849-2.773zm-.693.462 1.849 2.773-.487.325-1.849-2.774z",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#000",
+            d: "m6.475 12.286.693-.462zm9.36-6.24.81-.54zm1.502-1.002.694-.462z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: "#fff",
+            fillRule: "evenodd",
+            d: "m18.166 4.784-.693.463-.27-.406.693-.462zm-1.386.925-.81.54-.27-.406.81-.54zm-9.476 6.317-.694.463-.27-.406.693-.462z",
+            clipRule: "evenodd"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("clipPath", { id: "a", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fill: "#fff", d: "M1.906 2h20v13.333h-20z" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "filter",
+          {
+            id: "b",
+            width: 22.602,
+            height: 15.936,
+            x: 0.605,
+            y: 0.699,
+            colorInterpolationFilters: "sRGB",
+            filterUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  result: "hardAlpha",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feOffset", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feGaussianBlur", { stdDeviation: 0.65 }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "feBlend",
+                {
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow_306_2477"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "feBlend",
+                {
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow_306_2477",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
+var Kr_default = SvgKr;
+
+// src/icons/X.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SvgX = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 30,
+    height: 30,
+    fill: "none",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          fill: "#000",
+          fillRule: "evenodd",
+          d: "M25.977 4.023a.94.94 0 0 1 0 1.328L5.352 25.976a.939.939 0 0 1-1.327-1.328L24.65 4.023a.94.94 0 0 1 1.327 0",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          fill: "#000",
+          fillRule: "evenodd",
+          d: "M4.023 4.023a.94.94 0 0 0 0 1.328L24.65 25.976a.939.939 0 0 0 1.327-1.328L5.351 4.023a.94.94 0 0 0-1.328 0",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var X_default = SvgX;
+
+// src/icons/theme/Tritanopia.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SvgTritanopia = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 28 29",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "rect",
+        {
+          width: 26.18,
+          height: 26.18,
+          x: 0.91,
+          y: 1.41,
+          stroke: "currentColor",
+          strokeWidth: 1.82,
+          rx: 13.09
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M8.64 7.152h5.21q1.508 0 2.532.513 1.026.513 1.528 1.405.513.892.513 2.02 0 1.333-.667 2.081-.666.74-1.753 1.036v.144q.717.04 1.415.492.698.45 1.148 1.282.452.819.452 1.938 0 1.158-.534 2.04-.522.882-1.64 1.395-1.118.502-2.81.502H8.641zm5.374 13.207q1.65 0 2.43-.635.79-.636.79-1.682 0-.758-.39-1.395a2.63 2.63 0 0 0-1.097-1.015q-.709-.38-1.63-.38h-3.63v5.107zm-.226-6.706q.8 0 1.456-.307.657-.319 1.036-.892.38-.585.38-1.344 0-1.024-.708-1.671-.708-.646-2.102-.646h-3.364v4.86z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: 1.517,
+          d: "m3.5 1.666 23.333 23.333"
+        }
+      )
+    ]
+  }
+);
+var Tritanopia_default = SvgTritanopia;
+
+// src/icons/theme/Default.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SvgDefault = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 31 31",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M30.5 15.5s-5.625-10.312-15-10.312S.5 15.5.5 15.5s5.625 10.313 15 10.313 15-10.313 15-10.313m-27.801 0q.16-.245.365-.54c.628-.9 1.554-2.098 2.746-3.29 2.417-2.417 5.716-4.607 9.69-4.607s7.273 2.19 9.69 4.607A24.6 24.6 0 0 1 28.3 15.5q-.16.245-.365.54c-.628.9-1.554 2.098-2.746 3.29-2.417 2.417-5.716 4.608-9.69 4.608s-7.273-2.19-9.69-4.608A24.6 24.6 0 0 1 2.7 15.5"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M15.5 10.813a4.688 4.688 0 1 0 0 9.375 4.688 4.688 0 0 0 0-9.375M8.938 15.5a6.562 6.562 0 1 1 13.124 0 6.562 6.562 0 0 1-13.125 0"
+        }
+      )
+    ]
+  }
+);
+var Default_default = SvgDefault;
+
+// src/icons/theme/Protanopia.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SvgProtanopia = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 28 29",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "rect",
+        {
+          width: 26.18,
+          height: 26.18,
+          x: 0.91,
+          y: 1.41,
+          stroke: "currentColor",
+          strokeWidth: 1.82,
+          rx: 13.09
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.252 7.152h5.045q1.692 0 2.83.585 1.14.575 1.682 1.61.554 1.024.554 2.379 0 1.507-.697 2.594-.688 1.086-2.072 1.569L19.937 22h-2.153l-3.107-5.773-.36.01h-3.219V22H9.252zm4.984 7.404q1.711 0 2.502-.728.8-.729.8-2.102 0-1.395-.8-2.164t-2.523-.769h-3.117v5.763z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: 1.517,
+          d: "m3.5 1.666 23.333 23.333"
+        }
+      )
+    ]
+  }
+);
+var Protanopia_default = SvgProtanopia;
+
+// src/icons/theme/Deuteranopia.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SvgDeuteranopia = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 15 15",
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "rect",
+        {
+          width: 13.09,
+          height: 13.09,
+          x: 1.08,
+          y: 0.955,
+          stroke: "currentColor",
+          strokeWidth: 0.91,
+          rx: 6.545
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.51 5.894q-.245-.734-.789-1.144-.538-.415-1.312-.415-.667 0-1.205.343-.534.345-.846 1.01-.308.667-.308 1.6t.313 1.6q.313.665.861 1.01.549.343 1.246.343.626 0 1.103-.261a1.87 1.87 0 0 0 .748-.754q.271-.492.282-1.138H7.665v-.81h2.84v.8q0 .907-.39 1.594-.389.687-1.081 1.061-.687.37-1.564.37-.984 0-1.738-.462-.748-.466-1.164-1.328-.41-.866-.41-2.025 0-1.153.41-2.015.416-.866 1.154-1.333.738-.465 1.687-.466.774 0 1.42.307.646.303 1.071.851.426.548.564 1.262z"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeWidth: 0.758,
+          d: "m2.375 1.082 11.667 11.667"
+        }
+      )
+    ]
+  }
+);
+var Deuteranopia_default = SvgDeuteranopia;
+
+// src/react/ThemeSwitcherPortal.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var PORTAL_ID = "theme-switcher-portal";
+var portalEl = null;
+var activeOwner = null;
+function ensurePortal() {
+  if (typeof document === "undefined") throw new Error("No document");
+  if (portalEl && document.body.contains(portalEl)) return portalEl;
+  const existing = document.getElementById(PORTAL_ID);
+  portalEl = existing ?? Object.assign(document.createElement("div"), { id: PORTAL_ID });
+  if (!existing) document.body.appendChild(portalEl);
+  return portalEl;
+}
+function ThemeSwitcherPortal({
+  children
+}) {
+  const [container, setContainer] = (0, import_react2.useState)(null);
+  const ownerId = (0, import_react2.useRef)(Symbol("ThemeSwitcherPortal"));
+  (0, import_react2.useEffect)(() => {
+    const el = ensurePortal();
+    setContainer(el);
+    if (activeOwner === null) activeOwner = ownerId.current;
+    return () => {
+      if (activeOwner === ownerId.current) {
+        activeOwner = null;
+      }
+    };
+  }, []);
+  if (!container) return null;
+  const isPrimary = activeOwner === ownerId.current;
+  return (0, import_react_dom.createPortal)(isPrimary ? children : null, container);
+}
+
+// src/react/ThemeSwitcher.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var THEME_ICON = {
+  default: Default_default,
+  protanopia: Protanopia_default,
+  deuteranopia: Deuteranopia_default,
+  tritanopia: Tritanopia_default
+};
+function ThemeSwitcher({ options }) {
+  const { theme, updateTheme, language, updateLanguage } = useTheme();
+  const [hovered, setHovered] = (0, import_react3.useState)(null);
+  const list = (0, import_react3.useMemo)(
+    () => options?.length ? options : getThemeOptions(language),
+    [options, language]
+  );
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const wrapperRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const toggle = (e) => {
+    e.stopPropagation();
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeSwitcherPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: wrapperRef, className: "z-[10000]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        className: "fixed right-[25px] bottom-[25px] w-[60px] h-[60px] p-[10px] bg-[#ffffff] rounded-full flex justify-center items-center shadow-[0_0_3px_0_rgba(0,0,0,0.17)]",
+        children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(X_default, { className: "self-center" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Logo_default, { className: "self-center" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        role: "menu",
+        "aria-label": "Select theme",
+        className: "fixed bottom-[100px] right-[25px] flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px]",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: list.map((opt) => {
+            const Icon = THEME_ICON[opt.key];
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitemradio",
+                  "aria-checked": theme === opt.key,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    updateTheme(opt.key);
+                  },
+                  onMouseEnter: () => setHovered(opt.key),
+                  onMouseLeave: () => setHovered(null),
+                  className: [
+                    "hover:cursor-pointer group text-[18px] text-[#3D4852] py-1 w-full h-[50px] text-center gap-[8px] flex items-center justify-center rounded-[18px] hover:bg-[#3D4852]",
+                    theme === opt.key ? "bg-[#3D4852] text-[#ffffff]" : ""
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      Icon,
+                      {
+                        width: 24,
+                        height: 24,
+                        className: `inline-block ${theme === opt.key || hovered === opt.key ? "text-white" : "text-[#3D4852]"}`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "group-hover:text-[#ffffff]", children: opt.label })
+                  ]
+                },
+                opt.key
+              ),
+              opt.key !== "tritanopia" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "border-b-[0.5px] border-b-[#D9D9D9] w-full" })
+            ] }, opt.key);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full border-[0.5px] border-[#B8B8B8]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-evenly items-center gap-[10px] px-[10px] my-[15px]", children: language === "English" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center`,
+              onClick: () => updateLanguage("Korean"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Us_default, {}),
+                "English"
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center `,
+              onClick: () => updateLanguage("English"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Kr_default, {}),
+                "Korean"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}

package/dist/client.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type TLanguage = 'English' | 'Korean';
+declare const THEME_KEYS: readonly ["default", "protanopia", "deuteranopia", "tritanopia"];
+type ThemeKey = (typeof THEME_KEYS)[number];
+type ThemeContextType = {
+    theme: ThemeKey;
+    language: TLanguage;
+    updateTheme: (k: ThemeKey) => void;
+    updateLanguage: (t: TLanguage) => void;
+};
+declare const useTheme: () => ThemeContextType;
+type ThemeProviderProps = {
+    children: ReactNode;
+};
+declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+type ThemeType = ThemeKey;
+declare const THEMES: Record<TLanguage, Record<"default" | "protanopia" | "deuteranopia" | "tritanopia", string>>;
+
+type Props = {
+    options?: {
+        key: ThemeKey;
+        label: string;
+    }[];
+};
+declare function ThemeSwitcher({ options }: Props): react_jsx_runtime.JSX.Element;
+
+export { THEMES, type TLanguage, ThemeProvider, ThemeSwitcher, type ThemeType, useTheme };

package/dist/client.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type TLanguage = 'English' | 'Korean';
 declare const THEME_KEYS: readonly ["default", "protanopia", "deuteranopia", "tritanopia"];
@@ -10,9 +11,10 @@ type ThemeContextType = {
     updateLanguage: (t: TLanguage) => void;
 };
 declare const useTheme: () => ThemeContextType;
-declare function ThemeProvider({ children }: {
-    children: React.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+type ThemeProviderProps = {
+    children: ReactNode;
+};
+declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 type ThemeType = ThemeKey;
 declare const THEMES: Record<TLanguage, Record<"default" | "protanopia" | "deuteranopia" | "tritanopia", string>>;
 
@@ -21,8 +23,7 @@ type Props = {
         key: ThemeKey;
         label: string;
     }[];
-    className?: string;
 };
-declare function ThemeSwitcher({ options, className }: Props): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitcher({ options }: Props): react_jsx_runtime.JSX.Element;
 
 export { THEMES, type TLanguage, ThemeProvider, ThemeSwitcher, type ThemeType, useTheme };

package/dist/client.js

@@ -1,7 +1,13 @@
 "use client";
 
-// src/components/ThemeProvider.tsx
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+// src/react/ThemeProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
 import { jsx } from "react/jsx-runtime";
 var THEME_KEYS = [
   "default",
@@ -81,7 +87,7 @@ function ThemeProvider({ children }) {
 }
 var THEMES = THEME_LABEL;
 
-// src/components/ThemeSwitcher.tsx
+// src/react/ThemeSwitcher.tsx
 import { useEffect as useEffect3, useRef as useRef2, useState as useState3, useMemo as useMemo2 } from "react";
 
 // src/icons/Logo.tsx
@@ -539,7 +545,7 @@ var SvgDeuteranopia = (props) => /* @__PURE__ */ jsxs8(
 );
 var Deuteranopia_default = SvgDeuteranopia;
 
-// src/components/ThemeSwitcherPortal.tsx
+// src/react/ThemeSwitcherPortal.tsx
 import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 var PORTAL_ID = "theme-switcher-portal";
@@ -573,7 +579,7 @@ function ThemeSwitcherPortal({
   return createPortal(isPrimary ? children : null, container);
 }
 
-// src/components/ThemeSwitcher.tsx
+// src/react/ThemeSwitcher.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var THEME_ICON = {
   default: Default_default,
@@ -581,7 +587,7 @@ var THEME_ICON = {
   deuteranopia: Deuteranopia_default,
   tritanopia: Tritanopia_default
 };
-function ThemeSwitcher({ options, className }) {
+function ThemeSwitcher({ options }) {
   const { theme, updateTheme, language, updateLanguage } = useTheme();
   const [hovered, setHovered] = useState3(null);
   const list = useMemo2(

package/dist/styles.css

@@ -1,2 +1 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-white:#fff;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.right-\[25px\]{right:25px}.bottom-\[25px\]{bottom:25px}.bottom-\[100px\]{bottom:100px}.z-\[10000\]{z-index:10000}.my-\[15px\]{margin-block:15px}.block{display:block}.contents{display:contents}.flex{display:flex}.inline{display:inline}.inline-block{display:inline-block}.h-\[50px\]{height:50px}.h-\[60px\]{height:60px}.w-\[60px\]{width:60px}.w-\[220px\]{width:220px}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-evenly{justify-content:space-evenly}.gap-\[8px\]{gap:8px}.gap-\[10px\]{gap:10px}.gap-\[11px\]{gap:11px}.self-center{align-self:center}.rounded-\[18px\]{border-radius:18px}.rounded-full{border-radius:3.40282e38px}.border-\[0\.5px\]{border-style:var(--tw-border-style);border-width:.5px}.border-b-\[0\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.border-\[\#B8B8B8\]{border-color:#b8b8b8}.border-b-\[\#D9D9D9\]{border-bottom-color:#d9d9d9}.bg-\[\#3D4852\]{background-color:#3d4852}.bg-\[\#ffffff\]{background-color:#fff}.p-\[10px\]{padding:10px}.px-\[10px\]{padding-inline:10px}.py-1{padding-block:calc(var(--spacing)*1)}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[\#3D4852\]{color:#3d4852}.text-\[\#ffffff\]{color:#fff}.text-white{color:var(--color-white)}.shadow-\[0_0_3px_0_rgba\(0\,0\,0\,0\.17\)\]{--tw-shadow:0 0 3px 0 var(--tw-shadow-color,#0000002b);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.group-hover\:text-\[\#ffffff\]:is(:where(.group):hover *){color:#fff}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-\[\#3D4852\]:hover{background-color:#3d4852}}}svg rect{fill:none!important}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@source "./src/**/*.{js,ts,jsx,tsx}";svg rect{fill:none!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colbrush",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A React theme switching library that makes it easy to apply color-blind accessible UI themes",
   "homepage": "https://colbrush.vercel.app",
   "repository": {
@@ -75,6 +75,7 @@
     "svgr": "svgr src/assets --out-dir src/icons --typescript --expand-props end --svgo-config svgo.config.js",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
     "build": "pnpm svgr && tsup --config tsup.config.ts && pnpm build:css",
-    "dev": "tsup --config tsup.config.ts --watch"
+    "dev": "tsup --config tsup.config.ts --watch",
+    "lint": "eslint ."
   }
 }