@companix/uikit 0.1.9 → 0.1.11

package/dist/bundle.es40.js

@@ -1,103 +1,59 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import d from "classnames";
-import { Spinner as F } from "./bundle.es7.js";
-import { Icon as G } from "./bundle.es35.js";
-import { useResizeTextarea as H } from "./bundle.es47.js";
-import { callMultiple as J, attr as K } from "@companix/utils-browser";
-import { mergeRefs as L } from "react-merge-refs";
-import { useEffect as O } from "react";
-const P = ({
-  // WriteBarProps
-  before: r,
-  inlineAfter: s,
-  after: i,
-  onHeightChange: t,
-  shadow: m = !1,
-  containerRef: a,
-  attachbar: f,
-  contentClassName: l,
-  // textarea props
-  textareaRef: p,
-  autoComplete: h,
-  cols: x,
-  dirName: Q,
-  disabled: b,
-  maxLength: u,
-  minLength: w,
-  name: N,
-  placeholder: z,
-  readOnly: v,
-  required: R,
-  value: n,
-  wrap: g,
-  rows: j,
-  onChange: B,
-  onFocus: I,
-  onBlur: T,
-  id: A,
-  inputMode: C,
-  defaultValue: E,
-  autoFocus: M,
-  tabIndex: S,
-  spellCheck: W,
-  className: k,
-  onKeyDown: q,
-  ...y
-}) => {
-  const [D, o] = H(t, !0);
-  return O(o, [o, n]), /* @__PURE__ */ c("div", { ref: a, ...y, className: d("write-bar", k), children: [
-    f,
-    /* @__PURE__ */ c("div", { className: d("write-bar-content", l), children: [
-      r && /* @__PURE__ */ e("div", { className: "write-bar-before", children: r }),
-      /* @__PURE__ */ e("div", { className: "write-bar-form", children: /* @__PURE__ */ e(
-        "textarea",
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import c from "classnames";
+import { Spinner as b } from "./bundle.es7.js";
+import { Icon as h } from "./bundle.es35.js";
+import { attr as N } from "@companix/utils-browser";
+import { WriteBarInput as u } from "./bundle.es70.js";
+const w = (a) => {
+  const {
+    before: e,
+    after: t,
+    containerRef: i,
+    header: o,
+    contentClassName: n,
+    placeholder: m,
+    id: l,
+    onCreate: d,
+    className: p,
+    ...f
+  } = a;
+  return /* @__PURE__ */ s("div", { ref: i, ...f, className: c("write-bar", p), children: [
+    o,
+    /* @__PURE__ */ s("div", { className: c("write-bar-content", n), children: [
+      e && /* @__PURE__ */ r("div", { className: "write-bar-before", children: e }),
+      /* @__PURE__ */ r(
+        u,
         {
-          ref: L([p, D]),
-          id: A,
-          onChange: J(B, o),
-          autoComplete: h,
-          cols: x,
-          disabled: b,
-          maxLength: u,
-          minLength: w,
-          name: N,
-          placeholder: z,
-          readOnly: v,
-          required: R,
-          value: n,
-          wrap: g,
-          rows: j,
-          onFocus: I,
-          onBlur: T,
-          inputMode: C,
-          defaultValue: E,
-          autoFocus: M,
-          tabIndex: S,
-          spellCheck: W,
-          onKeyDown: q
+          className: "write-bar-input-wrapper",
+          placeholder: m,
+          placeholderClassName: "write-bar-placeholder",
+          inputClassName: "write-bar-input",
+          inputMode: "text",
+          id: l,
+          onCreate: d
         }
-      ) }),
-      i && /* @__PURE__ */ e("div", { className: "write-bar-after", children: i })
+      ),
+      t && /* @__PURE__ */ r("div", { className: "write-bar-after", children: t })
     ] })
   ] });
 };
-P.IconButton = ({
-  Component: r = "button",
-  icon: s,
-  mode: i,
-  onClick: t,
-  isLoading: m,
-  isHidden: a
-}) => /* @__PURE__ */ e(
-  r,
+w.IconButton = ({
+  Component: a = "button",
+  icon: e,
+  mode: t,
+  onClick: i,
+  isLoading: o,
+  isHidden: n
+}) => /* @__PURE__ */ r(
+  a,
   {
-    onClick: t,
+    onClick: i,
     className: "write-bar-icon",
-    "data-mode": i,
-    "data-hidden": K(a),
-    children: m ? /* @__PURE__ */ e(F, { size: 18 }) : /* @__PURE__ */ e(G, { icon: s, size: "xxs" })
+    "data-mode": t,
+    "data-hidden": N(n),
+    children: o ? /* @__PURE__ */ r(b, { size: 18 }) : /* @__PURE__ */ r(h, { icon: e, size: "xxs" })
   }
 );
 export {
-  P as WriteBar
+  w as WriteBar
 };

package/dist/bundle.es41.js

@@ -1,83 +1,158 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import f from "classnames";
-import { useContext as m, createContext as u, useState as h, useCallback as c, useMemo as w } from "react";
-const E = ({ title: t, icon: i, text: e, onDrop: s }) => {
-  const [l, n] = h(!1);
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      onDrop: s,
-      onDragEnter: () => n(!0),
-      onDragLeave: () => n(!1),
-      className: f("drop-target", {
-        "drop-target-hovered": l
-      }),
-      children: [
-        /* @__PURE__ */ r("div", { className: "drop-target-border", children: /* @__PURE__ */ r("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: /* @__PURE__ */ r("rect", { x: "0", y: "0", rx: "8px", ry: "8px", width: "100%", height: "100%" }) }) }),
-        /* @__PURE__ */ p("div", { className: "drop-target-area", children: [
-          /* @__PURE__ */ r("i", { className: "drop-target-icon", children: i }),
-          /* @__PURE__ */ p("div", { className: "drop-target-info", children: [
-            /* @__PURE__ */ r("span", { className: "drop-target-title", children: t }),
-            /* @__PURE__ */ r("span", { className: "drop-target-text", children: e })
-          ] })
-        ] })
-      ]
+import { getEditorSelection as r, normalizeEditorText as l, getNodeTextContent as h, scrollSelectionIntoView as c, getTextSelectionOffsets as m, isElementNode as u } from "./bundle.es71.js";
+class v {
+  element;
+  prevText = "";
+  prevTextSelection = { from: 0, to: 0 };
+  handlers = {
+    contentChange: /* @__PURE__ */ new Set()
+  };
+  constructor(e) {
+    if (e.contentEditable !== "true")
+      throw new Error("Элемент эдитора должен быть contentEditable");
+    e.tagName !== "SPAN" && console.warn("Используйте элемент span"), this.element = e, this.element.translate = !1;
+  }
+  getElement() {
+    return this.element;
+  }
+  onPaste(e) {
+    return this.handlers.paste || this.element.addEventListener("paste", this.handlePaste), this.handlers.paste = e, () => {
+      this.handlers.paste = void 0, this.element.removeEventListener("paste", this.handlePaste);
+    };
+  }
+  // onKeyCombo(handler: (combo: string, event: KeyboardEvent) => void): () => void {
+  //   const listener = onElementKeyDownFactory(handler) as EventListener
+  //   this.element.addEventListener('keydown', listener)
+  //   this.handlers.keyCombo = handler
+  //   return () => {
+  //     this.handlers.keyCombo = undefined
+  //     this.element.removeEventListener('keydown', listener)
+  //   }
+  // }
+  onFocusChange(e) {
+    return this.handlers.focusChange || (this.element.addEventListener("focus", this.handleFocus), this.element.addEventListener("blur", this.handleBlur)), this.handlers.focusChange = e, () => {
+      this.handlers.focusChange = void 0, this.element.removeEventListener("focus", this.handleFocus), this.element.removeEventListener("blur", this.handleBlur);
+    };
+  }
+  onContentChange(e) {
+    return this.handlers.contentChange.size === 0 && (this.element.addEventListener("keyup", this.checkContentChanged), document.addEventListener("selectionchange", this.checkContentChanged)), this.handlers.contentChange.add(e), () => {
+      this.handlers.contentChange.delete(e), this.handlers.contentChange.size === 0 && (this.element.removeEventListener("keyup", this.checkContentChanged), document.removeEventListener("selectionchange", this.checkContentChanged));
+    };
+  }
+  onMouseDown() {
+    return this.element.addEventListener("mousedown", this.handleMouseDown), () => {
+      this.element.removeEventListener("mousedown", this.handleMouseDown);
+    };
+  }
+  setSelection(e) {
+    const t = r(this.element);
+    if (!("selection" in t)) return;
+    const n = document.createRange(), s = this.resolveDomPosition(e.from), o = this.resolveDomPosition(e.to);
+    n.setStart(s.container, s.offset), n.setEnd(o.container, o.offset), t.selection.removeAllRanges(), t.selection.addRange(n);
+  }
+  insertAtSelection(e, t) {
+    t && this.setSelection(t), this.checkContentChanged();
+  }
+  removeFormat() {
+    document.execCommand("removeFormat");
+  }
+  resetText(e = "", t = !1, n = !0) {
+    const s = !this.isFocused() && !n;
+    this.element.innerText = "";
+    const o = document.activeElement, i = this.element.inputMode;
+    s && (this.element.inputMode = "none"), this.element.focus(), document.execCommand("removeFormat"), t ? document.execCommand("inserthtml", !1, e) : this.insertAtSelection(l(e)), s && (this.element.blur(), this.element.inputMode = i, o?.focus?.()), this.checkContentChanged();
+  }
+  getText() {
+    let e = "";
+    const t = document.createTreeWalker(
+      this.element,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+    );
+    for (; t.nextNode(); )
+      e += h(t.currentNode);
+    return l(e);
+  }
+  getHtml() {
+    return this.element.innerHTML;
+  }
+  getHtmlWithEmojisAsText() {
+    const e = this.element.innerHTML, t = /<img class="Emoji .+?" src=".+?" alt=".+?">/, n = /alt=".+?"/, s = (o) => {
+      const i = o.match(t);
+      if (!i?.[0]) return o;
+      const a = i[0].match(n);
+      if (!a?.[0]) return o;
+      const d = a[0].replace("alt=", "").replaceAll('"', "");
+      return s(o.replace(i[0], d));
+    };
+    return s(e);
+  }
+  focus(e = !1) {
+    if (this.isFocused()) return;
+    this.element.focus();
+    const t = r(this.element);
+    "selection" in t && (t.selection.selectAllChildren(this.element), e ? t.selection.collapseToStart() : t.selection.collapseToEnd(), c());
+  }
+  isFocused() {
+    return document.activeElement === this.element;
+  }
+  setDisabled(e) {
+    this.element.contentEditable = e ? "false" : "true";
+  }
+  handlePaste = async (e) => {
+    e.preventDefault();
+    const { clipboardData: t } = e;
+    if (!t) return;
+    const n = t.getData("text");
+    if (n) {
+      this.insertAtSelection(n), c();
+      return;
     }
-  );
-}, v = u({}), x = u({}), C = ({ onFilesAdd: t, ...i }) => {
-  const { onHide: e, isVisable: s } = m(v), [l, n] = h(!1), d = c((a) => {
-    a.preventDefault();
-  }, []), g = c(
-    (a) => {
-      a.stopPropagation();
-      const { relatedTarget: o } = a;
-      o instanceof HTMLElement && o?.matches(".drop-target, .drop-area") || e();
-    },
-    [l, e]
-  ), D = c(
-    (a) => {
-      a.preventDefault();
-      const o = [...Array.from(a.dataTransfer.files)];
-      o.length && t(o), e();
-    },
-    [t, e]
-  );
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      onDragStart: () => n(!0),
-      onDragEnter: () => n(!0),
-      onDragOver: d,
-      onDragLeave: g,
-      className: f("drop-area", {
-        "drop-area-hidden": !s
-      }),
-      onDrop: () => {
-        e(), n(!1);
-      },
-      children: s && /* @__PURE__ */ r(E, { ...i, onDrop: D })
+  };
+  handleFocus = () => {
+    this.handlers.focusChange?.(!0);
+  };
+  handleBlur = () => {
+    this.handlers.focusChange?.(!1);
+  };
+  handleMouseDown = (e) => {
+    if (!(e.target instanceof HTMLImageElement)) return;
+    const t = new Range(), n = window.getSelection();
+    n && (t.selectNode(e.target), t.collapse(e.offsetX <= 8), n.removeAllRanges(), n.addRange(t));
+  };
+  checkContentChanged = () => {
+    const e = l(this.getText()), t = r(this.element);
+    if (!("range" in t)) return;
+    const n = m(this.element, t.range);
+    if (e === this.prevText && n.from === this.prevTextSelection.from && n.to === this.prevTextSelection.to)
+      return;
+    const s = e === `
+` && this.prevText.length > 0;
+    if (this.prevText = e, this.prevTextSelection = n, s) {
+      this.resetText("");
+      return;
     }
-  );
-}, H = ({ children: t }) => {
-  const [i, e] = h(!1), s = c(() => {
-    e(!1);
-  }, []), l = c((d) => {
-    const { items: g } = d.dataTransfer;
-    Array.from(g).filter(
-      ({ type: a, kind: o }) => a !== "text/uri-list" && o !== "string"
-    ).length && e(!0);
-  }, []), n = w(() => ({
-    onDragEnter: l
-  }), []);
-  return /* @__PURE__ */ r(v.Provider, { value: { isVisable: i, onHide: s }, children: /* @__PURE__ */ r(x.Provider, { value: n, children: t }) });
-}, T = () => {
-  const { onDragEnter: t } = m(x);
-  if (!t)
-    throw new Error("useDragContext should be within context");
-  return t;
-};
+    this.handlers.contentChange.forEach((o) => o(e, n));
+  };
+  resolveDomPosition(e) {
+    const t = document.createTreeWalker(
+      this.element,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+    );
+    let n = e;
+    for (; t.nextNode(); ) {
+      const s = t.currentNode, o = h(s).length;
+      if (o >= n)
+        return u(s) && s.nodeName === "BR" && (n -= 1), {
+          container: s,
+          offset: Math.max(n, 0)
+        };
+      n -= o;
+    }
+    return {
+      container: this.element,
+      offset: this.element.childNodes.length
+    };
+  }
+}
 export {
-  C as DropArea,
-  H as DropAreaProvider,
-  T as useDragEnter
+  v as Editor
 };

package/dist/bundle.es42.js

@@ -1,9 +1,83 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-const b = ({ header: c, items: e, getItemLayout: d, className: o, onRowClick: h }) => /* @__PURE__ */ p("table", { className: o, children: [
-  /* @__PURE__ */ r("colgroup", { children: c.map(({ style: t }, l) => /* @__PURE__ */ r("col", { style: t }, `colgroup-col-${l}`)) }),
-  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: c.map(({ content: t }, l) => /* @__PURE__ */ r("th", { children: t }, `header-th-${l}`)) }) }),
-  /* @__PURE__ */ r("tbody", { children: e.map((t, l) => /* @__PURE__ */ r("tr", { onClick: () => h?.(t), children: d(t, l).map((n, a) => /* @__PURE__ */ r("td", { children: n }, `table-td-${l}-${a}`)) }, `table-tr-${l}`)) })
-] });
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import f from "classnames";
+import { useContext as m, createContext as u, useState as h, useCallback as c, useMemo as w } from "react";
+const E = ({ title: t, icon: i, text: e, onDrop: s }) => {
+  const [l, n] = h(!1);
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      onDrop: s,
+      onDragEnter: () => n(!0),
+      onDragLeave: () => n(!1),
+      className: f("drop-target", {
+        "drop-target-hovered": l
+      }),
+      children: [
+        /* @__PURE__ */ r("div", { className: "drop-target-border", children: /* @__PURE__ */ r("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: /* @__PURE__ */ r("rect", { x: "0", y: "0", rx: "8px", ry: "8px", width: "100%", height: "100%" }) }) }),
+        /* @__PURE__ */ p("div", { className: "drop-target-area", children: [
+          /* @__PURE__ */ r("i", { className: "drop-target-icon", children: i }),
+          /* @__PURE__ */ p("div", { className: "drop-target-info", children: [
+            /* @__PURE__ */ r("span", { className: "drop-target-title", children: t }),
+            /* @__PURE__ */ r("span", { className: "drop-target-text", children: e })
+          ] })
+        ] })
+      ]
+    }
+  );
+}, v = u({}), x = u({}), C = ({ onFilesAdd: t, ...i }) => {
+  const { onHide: e, isVisable: s } = m(v), [l, n] = h(!1), d = c((a) => {
+    a.preventDefault();
+  }, []), g = c(
+    (a) => {
+      a.stopPropagation();
+      const { relatedTarget: o } = a;
+      o instanceof HTMLElement && o?.matches(".drop-target, .drop-area") || e();
+    },
+    [l, e]
+  ), D = c(
+    (a) => {
+      a.preventDefault();
+      const o = [...Array.from(a.dataTransfer.files)];
+      o.length && t(o), e();
+    },
+    [t, e]
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      onDragStart: () => n(!0),
+      onDragEnter: () => n(!0),
+      onDragOver: d,
+      onDragLeave: g,
+      className: f("drop-area", {
+        "drop-area-hidden": !s
+      }),
+      onDrop: () => {
+        e(), n(!1);
+      },
+      children: s && /* @__PURE__ */ r(E, { ...i, onDrop: D })
+    }
+  );
+}, H = ({ children: t }) => {
+  const [i, e] = h(!1), s = c(() => {
+    e(!1);
+  }, []), l = c((d) => {
+    const { items: g } = d.dataTransfer;
+    Array.from(g).filter(
+      ({ type: a, kind: o }) => a !== "text/uri-list" && o !== "string"
+    ).length && e(!0);
+  }, []), n = w(() => ({
+    onDragEnter: l
+  }), []);
+  return /* @__PURE__ */ r(v.Provider, { value: { isVisable: i, onHide: s }, children: /* @__PURE__ */ r(x.Provider, { value: n, children: t }) });
+}, T = () => {
+  const { onDragEnter: t } = m(x);
+  if (!t)
+    throw new Error("useDragContext should be within context");
+  return t;
+};
 export {
-  b as Table
+  C as DropArea,
+  H as DropAreaProvider,
+  T as useDragEnter
 };

package/dist/bundle.es43.js

@@ -1,37 +1,9 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
-import { getColorScheme as v, updateDOM as m } from "./bundle.es69.js";
-const i = f({
-  setColorScheme: () => {
-  }
-}), y = () => w(i), p = (d) => {
-  const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
-    a(e), localStorage.setItem(n, e);
-  };
-  return c(() => {
-    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-    if (!e)
-      return;
-    const t = () => {
-      r === "system" && m("system");
-    };
-    return e.addEventListener?.("change", t), t(), () => {
-      e.removeEventListener?.("change", t);
-    };
-  }, [r]), c(() => {
-    if (!window)
-      return;
-    const e = (t) => {
-      t.key === n && (t.newValue ? a(t.newValue) : s(o));
-    };
-    return window.addEventListener("storage", e), () => {
-      window.removeEventListener("storage", e);
-    };
-  }, [s, o]), c(() => {
-    m(r);
-  }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
-};
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+const b = ({ header: c, items: e, getItemLayout: d, className: o, onRowClick: h }) => /* @__PURE__ */ p("table", { className: o, children: [
+  /* @__PURE__ */ r("colgroup", { children: c.map(({ style: t }, l) => /* @__PURE__ */ r("col", { style: t }, `colgroup-col-${l}`)) }),
+  /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: c.map(({ content: t }, l) => /* @__PURE__ */ r("th", { children: t }, `header-th-${l}`)) }) }),
+  /* @__PURE__ */ r("tbody", { children: e.map((t, l) => /* @__PURE__ */ r("tr", { onClick: () => h?.(t), children: d(t, l).map((n, a) => /* @__PURE__ */ r("td", { children: n }, `table-td-${l}-${a}`)) }, `table-tr-${l}`)) })
+] });
 export {
-  p as ThemeProvider,
-  y as useTheme
+  b as Table
 };

package/dist/bundle.es44.js

@@ -1,24 +1,37 @@
-import { jsx as l } from "react/jsx-runtime";
-import { memo as n } from "react";
-const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
-  "script",
-  {
-    suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: {
-      __html: `(${a.toString()})("${t}", "${o}")`
-    }
-  }
-)), a = (t, o) => {
-  const [r, c] = ["theme-light", "theme-dark"];
-  try {
-    let e = localStorage.getItem(t) || o;
-    e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-    const s = e === "dark" ? c : r;
-    document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
-  } catch {
+import { jsx as u } from "react/jsx-runtime";
+import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
+import { getColorScheme as v, updateDOM as m } from "./bundle.es72.js";
+const i = f({
+  setColorScheme: () => {
   }
+}), y = () => w(i), p = (d) => {
+  const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
+    a(e), localStorage.setItem(n, e);
+  };
+  return c(() => {
+    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+    if (!e)
+      return;
+    const t = () => {
+      r === "system" && m("system");
+    };
+    return e.addEventListener?.("change", t), t(), () => {
+      e.removeEventListener?.("change", t);
+    };
+  }, [r]), c(() => {
+    if (!window)
+      return;
+    const e = (t) => {
+      t.key === n && (t.newValue ? a(t.newValue) : s(o));
+    };
+    return window.addEventListener("storage", e), () => {
+      window.removeEventListener("storage", e);
+    };
+  }, [s, o]), c(() => {
+    m(r);
+  }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
 };
 export {
-  i as ColorSchemeScript,
-  a as colorSchemeScript
+  p as ThemeProvider,
+  y as useTheme
 };

package/dist/bundle.es45.js

@@ -1,13 +1,24 @@
-import { useState as s, useEffect as c } from "react";
-const l = (e, a) => {
-  const [t, o] = s(() => {
-    const r = localStorage.getItem(e);
-    return r ? JSON.parse(r) : a;
-  });
-  return c(() => {
-    localStorage.setItem(e, JSON.stringify(t));
-  }, [t]), [t, o];
+import { jsx as l } from "react/jsx-runtime";
+import { memo as n } from "react";
+const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
+  "script",
+  {
+    suppressHydrationWarning: !0,
+    dangerouslySetInnerHTML: {
+      __html: `(${a.toString()})("${t}", "${o}")`
+    }
+  }
+)), a = (t, o) => {
+  const [r, c] = ["theme-light", "theme-dark"];
+  try {
+    let e = localStorage.getItem(t) || o;
+    e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    const s = e === "dark" ? c : r;
+    document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
+  } catch {
+  }
 };
 export {
-  l as useLocalStorage
+  i as ColorSchemeScript,
+  a as colorSchemeScript
 };

package/dist/bundle.es46.js

@@ -1,14 +1,13 @@
-import { useState as r, useCallback as t } from "react";
-const f = (s = !1) => {
-  const [o, e] = r(s), a = t(() => {
-    e(!0);
-  }, []), l = t(() => {
-    e(!1);
-  }, []), u = t(() => {
-    e((n) => !n);
-  }, []);
-  return [o, a, l, u];
+import { useState as s, useEffect as c } from "react";
+const l = (e, a) => {
+  const [t, o] = s(() => {
+    const r = localStorage.getItem(e);
+    return r ? JSON.parse(r) : a;
+  });
+  return c(() => {
+    localStorage.setItem(e, JSON.stringify(t));
+  }, [t]), [t, o];
 };
 export {
-  f as useBooleanState
+  l as useLocalStorage
 };