@inkeep/cxkit-color-mode 0.0.0-dev-20250221234142

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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/README.md

@@ -0,0 +1 @@
+# @inkeep

package/dist/color-mode-provider.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),n=require("react"),L=["light","dark"],P="(prefers-color-scheme: dark)",T=typeof window>"u",D=n.createContext(void 0),_={setColorMode:e=>{},colorModes:[]},I=()=>n.useContext(D)??_;function q(e,l){const t=I();return(t.forcedColorMode??t.resolvedColorMode)==="dark"?l:e}const z=e=>(n.useContext(D),x.jsx(N,{...e})),J=()=>{},Q={setColorMode:J,colorModes:["dark"],colorMode:"dark",forcedColorMode:"dark",resolvedColorMode:"dark",systemColorMode:"dark"},F=({children:e})=>x.jsx(D.Provider,{value:Q,children:x.jsx("div",{"data-theme":"dark",children:e})}),G=["light","dark"],N=({forcedColorMode:e,disableTransitionOnChange:l=!1,enableSystem:t=!1,enableColorScheme:y=!0,storageKey:m="inkeep-colorMode",colorModes:r=G,defaultColorMode:o=t?"system":"light",attribute:M="data-theme",value:$,children:S,nonce:j,shadowHostId:p,rootId:h})=>{const[i,a]=n.useState(()=>R(m,o)),[w,d]=n.useState(()=>R(m)),u=$?Object.values($):r,g=n.useCallback(s=>{let c=s;if(!c)return;s==="system"&&t&&(c=B());const C=$?$[c]:c,O=l?W():null,A=p&&h&&document.getElementById(p)?.shadowRoot,E=A?A.getElementById(h)??document.documentElement:document.documentElement;if(M==="class"?(E.classList.remove(...u),C&&E.classList.add(C)):C?E.setAttribute(M,C):E.removeAttribute(M),y){const V=L.includes(o)?o:null,b=L.includes(c)?c:V;E.style.colorScheme=b}O?.()},[]),f=n.useCallback(s=>{a(s);try{localStorage.setItem(m,s)}catch{}},[e]),v=n.useCallback(s=>{const c=B(s);d(c),i==="system"&&t&&!e&&g("system")},[i,e]);n.useEffect(()=>{const s=window.matchMedia(P);return s.addListener(v),v(s),()=>s.removeListener(v)},[v]),n.useEffect(()=>{const s=c=>{if(c.key!==m)return;const C=c.newValue||o;f(C)};return window.addEventListener("storage",s),()=>window.removeEventListener("storage",s)},[f]),n.useEffect(()=>{g(e??i)},[e,i]);const k=n.useMemo(()=>({colorMode:i,setColorMode:f,forcedColorMode:e,resolvedColorMode:i==="system"?w:i,colorModes:t?[...r,"system"]:r,systemColorMode:t?w:void 0}),[i,f,e,w,t,r]);return x.jsxs(D.Provider,{value:k,children:[x.jsx(U,{forcedColorMode:e,disableTransitionOnChange:l,enableSystem:t,enableColorScheme:y,storageKey:m,colorModes:r,defaultColorMode:o,attribute:M,value:$,children:S,attrs:u,nonce:j,shadowHostId:p,rootId:h}),S]})},U=n.memo(({forcedColorMode:e,storageKey:l,attribute:t,enableSystem:y,enableColorScheme:m,defaultColorMode:r,value:o,attrs:M,nonce:$,shadowHostId:S,rootId:j})=>{const p=r==="system",h=(()=>{const d=S&&j?`document.getElementById('${S}').shadowRoot.getElementById('${j}')`:"document.documentElement";if(t==="class"){const u=`c.remove(${M.map(g=>`'${g}'`).join(",")})`;return`var d=${d},c=d.classList;${u};`}return`var d=${d},n='${t}',s='setAttribute';`})(),i=m?(L.includes(r)?r:null)?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${r}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",a=(d,u=!1,g=!0)=>{const f=o?o[d]:d,v=u?`${d}|| ''`:`'${f}'`;let k="";return m&&g&&!u&&L.includes(d)&&(k+=`d.style.colorScheme = '${d}';`),t==="class"?u||f?k+=`c.add(${v})`:k+="null":f&&(k+=`d[s](n,${v})`),k},w=e?`!function(){${h}${a(e)}}()`:y?`!function(){try{${h}var e=localStorage.getItem('${l}');if('system'===e||(!e&&${p})){var t='${P}',m=window.matchMedia(t);if(m.media!==t||m.matches){${a("dark")}}else{${a("light")}}}else if(e){${o?`var x=${JSON.stringify(o)};`:""}${a(o?"x[e]":"e",!0)}}${p?"":`else{${a(r,!1,!1)}}`}${i}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${l}');if(e){${o?`var x=${JSON.stringify(o)};`:""}${a(o?"x[e]":"e",!0)}}else{${a(r,!1,!1)};}${i}}catch(t){}}();`;return x.jsx("script",{nonce:$,dangerouslySetInnerHTML:{__html:w}})},()=>!0),R=(e,l)=>{if(T)return;let t;try{t=localStorage.getItem(e)||void 0}catch{}return t||l},W=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},B=e=>(e||(e=window.matchMedia(P)),e.matches?"dark":"light");exports.ColorMode=N;exports.ColorModeProvider=z;exports.DarkModeProvider=F;exports.useColorMode=I;exports.useColorModeValue=q;

package/dist/color-mode-provider.d.cts

@@ -0,0 +1,21 @@
+import { ColorModeProviderProps } from '@inkeep/cxkit-types';
+export type ColorMode = 'light' | 'dark';
+export declare const useColorMode: () => any;
+/**
+ * Change value based on color mode.
+ *
+ * @param light the light mode value
+ * @param dark the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
+export declare function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark): TLight | TDark;
+export declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
+export declare const DarkModeProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorMode: React.FC<ColorModeProviderProps>;

package/dist/color-mode-provider.d.ts

@@ -0,0 +1,21 @@
+import { ColorModeProviderProps } from '@inkeep/cxkit-types';
+export type ColorMode = 'light' | 'dark';
+export declare const useColorMode: () => any;
+/**
+ * Change value based on color mode.
+ *
+ * @param light the light mode value
+ * @param dark the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
+export declare function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark): TLight | TDark;
+export declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
+export declare const DarkModeProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorMode: React.FC<ColorModeProviderProps>;

package/dist/color-mode-provider.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as x, jsxs as J } from "react/jsx-runtime";
+import { useContext as O, createContext as T, useState as N, useCallback as A, useEffect as j, useMemo as Q, memo as q } from "react";
+const L = ["light", "dark"], B = "(prefers-color-scheme: dark)", F = typeof window > "u", D = T(void 0), G = {
+  setColorMode: (e) => {
+  },
+  colorModes: []
+}, U = () => O(D) ?? G;
+function te(e, d) {
+  const t = U();
+  return (t.forcedColorMode ?? t.resolvedColorMode) === "dark" ? d : e;
+}
+const oe = (e) => (O(D), /* @__PURE__ */ x(Z, { ...e })), W = () => {
+}, X = {
+  setColorMode: W,
+  colorModes: ["dark"],
+  colorMode: "dark",
+  forcedColorMode: "dark",
+  resolvedColorMode: "dark",
+  systemColorMode: "dark"
+}, se = ({ children: e }) => /* @__PURE__ */ x(D.Provider, { value: X, children: /* @__PURE__ */ x("div", { "data-theme": "dark", children: e }) }), Y = ["light", "dark"], Z = ({
+  forcedColorMode: e,
+  disableTransitionOnChange: d = !1,
+  enableSystem: t = !1,
+  enableColorScheme: v = !0,
+  storageKey: a = "inkeep-colorMode",
+  colorModes: n = Y,
+  defaultColorMode: o = t ? "system" : "light",
+  attribute: k = "data-theme",
+  value: f,
+  children: w,
+  nonce: E,
+  shadowHostId: y,
+  rootId: $
+}) => {
+  const [c, l] = N(() => P(a, o)), [C, i] = N(() => P(a)), m = f ? Object.values(f) : n, g = A((s) => {
+    let r = s;
+    if (!r) return;
+    s === "system" && t && (r = R());
+    const M = f ? f[r] : r, V = d ? H() : null, I = y && $ && document.getElementById(y)?.shadowRoot, S = I ? I.getElementById($) ?? document.documentElement : document.documentElement;
+    if (k === "class" ? (S.classList.remove(...m), M && S.classList.add(M)) : M ? S.setAttribute(k, M) : S.removeAttribute(k), v) {
+      const _ = L.includes(o) ? o : null, z = L.includes(r) ? r : _;
+      S.style.colorScheme = z;
+    }
+    V?.();
+  }, []), u = A(
+    (s) => {
+      l(s);
+      try {
+        localStorage.setItem(a, s);
+      } catch {
+      }
+    },
+    [e]
+  ), h = A(
+    (s) => {
+      const r = R(s);
+      i(r), c === "system" && t && !e && g("system");
+    },
+    [c, e]
+  );
+  j(() => {
+    const s = window.matchMedia(B);
+    return s.addListener(h), h(s), () => s.removeListener(h);
+  }, [h]), j(() => {
+    const s = (r) => {
+      if (r.key !== a)
+        return;
+      const M = r.newValue || o;
+      u(M);
+    };
+    return window.addEventListener("storage", s), () => window.removeEventListener("storage", s);
+  }, [u]), j(() => {
+    g(e ?? c);
+  }, [e, c]);
+  const p = Q(
+    () => ({
+      colorMode: c,
+      setColorMode: u,
+      forcedColorMode: e,
+      resolvedColorMode: c === "system" ? C : c,
+      colorModes: t ? [...n, "system"] : n,
+      systemColorMode: t ? C : void 0
+    }),
+    [c, u, e, C, t, n]
+  );
+  return /* @__PURE__ */ J(D.Provider, { value: p, children: [
+    /* @__PURE__ */ x(
+      b,
+      {
+        forcedColorMode: e,
+        disableTransitionOnChange: d,
+        enableSystem: t,
+        enableColorScheme: v,
+        storageKey: a,
+        colorModes: n,
+        defaultColorMode: o,
+        attribute: k,
+        value: f,
+        children: w,
+        attrs: m,
+        nonce: E,
+        shadowHostId: y,
+        rootId: $
+      }
+    ),
+    w
+  ] });
+}, b = q(
+  ({
+    forcedColorMode: e,
+    storageKey: d,
+    attribute: t,
+    enableSystem: v,
+    enableColorScheme: a,
+    defaultColorMode: n,
+    value: o,
+    attrs: k,
+    nonce: f,
+    shadowHostId: w,
+    rootId: E
+  }) => {
+    const y = n === "system", $ = (() => {
+      const i = w && E ? `document.getElementById('${w}').shadowRoot.getElementById('${E}')` : "document.documentElement";
+      if (t === "class") {
+        const m = `c.remove(${k.map((g) => `'${g}'`).join(",")})`;
+        return `var d=${i},c=d.classList;${m};`;
+      }
+      return `var d=${i},n='${t}',s='setAttribute';`;
+    })(), c = a ? (L.includes(n) ? n : null) ? `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${n}'` : "if(e==='light'||e==='dark')d.style.colorScheme=e" : "", l = (i, m = !1, g = !0) => {
+      const u = o ? o[i] : i, h = m ? `${i}|| ''` : `'${u}'`;
+      let p = "";
+      return a && g && !m && L.includes(i) && (p += `d.style.colorScheme = '${i}';`), t === "class" ? m || u ? p += `c.add(${h})` : p += "null" : u && (p += `d[s](n,${h})`), p;
+    }, C = e ? `!function(){${$}${l(e)}}()` : v ? `!function(){try{${$}var e=localStorage.getItem('${d}');if('system'===e||(!e&&${y})){var t='${B}',m=window.matchMedia(t);if(m.media!==t||m.matches){${l(
+      "dark"
+    )}}else{${l("light")}}}else if(e){${o ? `var x=${JSON.stringify(o)};` : ""}${l(o ? "x[e]" : "e", !0)}}${y ? "" : `else{${l(n, !1, !1)}}`}${c}}catch(e){}}()` : `!function(){try{${$}var e=localStorage.getItem('${d}');if(e){${o ? `var x=${JSON.stringify(o)};` : ""}${l(o ? "x[e]" : "e", !0)}}else{${l(
+      n,
+      !1,
+      !1
+    )};}${c}}catch(t){}}();`;
+    return /* @__PURE__ */ x("script", { nonce: f, dangerouslySetInnerHTML: { __html: C } });
+  },
+  // Never re-render this component
+  () => !0
+), P = (e, d) => {
+  if (F) return;
+  let t;
+  try {
+    t = localStorage.getItem(e) || void 0;
+  } catch {
+  }
+  return t || d;
+}, H = () => {
+  const e = document.createElement("style");
+  return e.appendChild(
+    document.createTextNode(
+      "*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"
+    )
+  ), document.head.appendChild(e), () => {
+    window.getComputedStyle(document.body), setTimeout(() => {
+      document.head.removeChild(e);
+    }, 1);
+  };
+}, R = (e) => (e || (e = window.matchMedia(B)), e.matches ? "dark" : "light");
+export {
+  Z as ColorMode,
+  oe as ColorModeProvider,
+  se as DarkModeProvider,
+  U as useColorMode,
+  te as useColorModeValue
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./color-mode-provider.cjs");exports.ColorMode=o.ColorMode;exports.ColorModeProvider=o.ColorModeProvider;exports.DarkModeProvider=o.DarkModeProvider;exports.useColorMode=o.useColorMode;exports.useColorModeValue=o.useColorModeValue;

package/dist/index.d.cts

@@ -0,0 +1 @@
+export * from './color-mode-provider';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './color-mode-provider';

package/dist/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { ColorMode as r, ColorModeProvider as d, DarkModeProvider as l, useColorMode as M, useColorModeValue as u } from "./color-mode-provider.js";
+export {
+  r as ColorMode,
+  d as ColorModeProvider,
+  l as DarkModeProvider,
+  M as useColorMode,
+  u as useColorModeValue
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@inkeep/cxkit-color-mode",
+  "version": "0.0.0-dev-20250221234142",
+  "description": "",
+  "license": "Inkeep, Inc. Customer License (IICL) v1.1",
+  "homepage": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inkeep/widget",
+    "directory": "packages/color-mode"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "files": [
+    "dist"
+  ],
+  "clean-package": "../../clean-package.config.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
+    "@vitejs/plugin-react": "4.3.4",
+    "clean-package": "2.2.0",
+    "globby": "14.0.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "typescript": "5.7.3",
+    "vite": "5.4.11",
+    "vite-plugin-dts": "4.4.0"
+  },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "biome lint ./src",
+    "typecheck": "tsc"
+  }
+}