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