css-vars-hook/dist/index.js

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

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