css-vars-hook/dist/index.js

css-vars-hook contains React hooks to set and manipulate CSS custom properties from React component.

"use client";
import { useContext as S, createContext as C, useRef as b, useCallback as u, useMemo as y, useId as I, useEffect as V, forwardRef as v, createElement as x } from "react";
import { jsx as h } from "react/jsx-runtime";
const T = C({
  setTheme: () => {
  },
  getTheme: () => ({}),
  setVariable: () => {
  },
  getVariable: () => "",
  removeVariable: () => {
  }
}), j = () => S(T), q = () => {
  const { setTheme: t, getTheme: o, setVariable: e, getVariable: s, removeVariable: r } = j();
  return {
    /** Effect to apply new theme to the application */
    setTheme: t,
    /** Get current theme */
    getTheme: o,
    /** Effect to set new variable value within active theme */
    setVariable: e,
    /** Get variable value within active theme */
    getVariable: s,
    /** Effect to remove variable within active theme */
    removeVariable: r
  };
}, f = (t) => typeof t == "string" ? t : `${t}`, d = (t) => {
  const o = Object.keys(t), e = {};
  return o.forEach((s) => {
    e[`--${s}`] = t[s];
  }), e;
}, p = (t) => {
  const o = Object.keys(t);
  let e = "";
  return o.forEach((s) => {
    e = `${e}--${s}:${t[s]};`;
  }), e;
}, k = (t) => (o) => {
  const e = p(o);
  t == null || t.setAttribute("style", e);
}, B = (t) => (o, e) => {
  t.style.setProperty(`--${o}`, f(e));
}, L = (t) => (o) => {
  const e = document.getElementById(t), s = p(o);
  e == null || e.setAttribute("style", s);
}, O = (t) => (o, e) => {
  var r, l;
  const s = document.getElementById(t);
  (l = (r = s == null ? void 0 : s.style) == null ? void 0 : r.setProperty) == null || l.call(r, `--${o}`, f(e));
}, A = (t) => (o) => {
  var s, r;
  const e = document.getElementById(t);
  return (r = (s = e == null ? void 0 : e.style) == null ? void 0 : s.getPropertyValue) == null ? void 0 : r.call(s, `--${o}`);
}, M = (t) => (o) => {
  var s, r;
  const e = document.getElementById(t);
  (r = (s = e == null ? void 0 : e.style) == null ? void 0 : s.removeProperty) == null || r.call(s, `--${o}`);
}, w = (t, o) => {
  const e = b(t), s = u(
    (c) => {
      L(o)(c), e.current = c;
    },
    [o]
  ), r = u(() => e.current, []), l = u(
    (c) => A(o)(c),
    [o]
  ), m = u(
    (c, i) => {
      O(o)(c, i), e.current = {
        ...e.current,
        [c]: i
      };
    },
    [o]
  ), n = u(
    (c) => {
      M(o)(c);
      const i = { ...e.current };
      delete i[c], e.current = i;
    },
    [o]
  ), a = y(() => d(e.current), []);
  return {
    /** Effect to apply new theme to the application */
    setTheme: s,
    /** CSSProperties object to apply to container div */
    style: a,
    /** Get current theme */
    getTheme: r,
    /** Get variable value within active theme */
    getVariable: l,
    /** Effect to set new variable value within active theme */
    setVariable: m,
    /** Effect to remove variable within active theme */
    removeVariable: n
  };
}, D = ({
  children: t,
  theme: o,
  className: e,
  id: s,
  ...r
}) => {
  const l = I(), m = s || l, { setTheme: n, style: a, getTheme: c, getVariable: i, setVariable: R, removeVariable: g } = w(o, m), { Provider: E } = T, P = y(
    () => ({ setTheme: n, getTheme: c, getVariable: i, setVariable: R, removeVariable: g }),
    [n, c, i, R, g]
  );
  return V(() => {
    n(o);
  }, [o, n]), /* @__PURE__ */ h(E, { value: P, children: /* @__PURE__ */ h("div", { ...r, id: m, className: e, style: a, children: t }) });
}, $ = v((t, o) => {
  const { children: e, as: s = "div", theme: r = {}, setTheme: l = () => {
  }, ...m } = t, n = y(() => d(r), [r]);
  return V(() => {
    l(r);
  }, [r, l]), x(s, { ...m, style: n, ref: o }, e);
});
$.displayName = "LocalRoot";
const F = () => {
  const t = b(), o = b(null), e = u((n) => {
    k(o.current)(n), t.current = n;
  }, []), s = u(() => t.current, []), r = u(
    (n) => {
      var a;
      return (a = t.current) == null ? void 0 : a[n];
    },
    []
  ), l = u((n, a) => {
    B(o.current)(n, a), t.current = { ...t.current, [n]: a };
  }, []), m = y(
    () => (
      // eslint-disable-next-line react/display-name
      ({ children: n, ...a }) => /* @__PURE__ */ h($, { ...a, setTheme: e, ref: o, children: n })
    ),
    [e]
  );
  return {
    /** Effect to apply new theme to LocalRoot */
    setTheme: e,
    /** Get current theme set for LocalRoot */
    getTheme: s,
    /** Wrapper component which creates DOM node to store theme data */
    LocalRoot: m,
    /** React Mutable Ref object attached to LocalRoot */
    ref: o,
    /** Get variable value within LocalRoot theme */
    getVariable: r,
    /** Effect to set new variable value within LocalRoot theme */
    setVariable: l
  };
};
export {
  D as RootThemeProvider,
  F as useLocalTheme,
  q as useRootTheme
};
//# sourceMappingURL=index.js.map