css-vars-hook/dist/index.umd.cjs

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

(function(m,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],s):(m=typeof globalThis<"u"?globalThis:m||self,s(m["css-vars-hook"]={},m.React,m.jsxRuntime))})(this,function(m,s,b){"use strict";const h=s.createContext({setTheme:()=>{},getTheme:()=>({}),setVariable:()=>{},getVariable:()=>"",removeVariable:()=>{}}),p=()=>s.useContext(h),k=()=>{const{setTheme:o,getTheme:t,setVariable:e,getVariable:n,removeVariable:r}=p();return{setTheme:o,getTheme:t,setVariable:e,getVariable:n,removeVariable:r}},d=o=>typeof o=="string"?o:`${o}`,y=o=>(t,e)=>{o.style.setProperty(`--${t}`,d(e))},R=o=>{const t=Object.keys(o),e={};return t.forEach(n=>{e[`--${n}`]=o[n]}),e},T=o=>(t,e)=>{var r,a;const n=document.getElementById(o);(a=(r=n==null?void 0:n.style)==null?void 0:r.setProperty)==null||a.call(r,`--${t}`,d(e))},j=o=>t=>{var n,r;const e=document.getElementById(o);return(r=(n=e==null?void 0:e.style)==null?void 0:n.getPropertyValue)==null?void 0:r.call(n,`--${t}`)},P=o=>t=>{var n,r;const e=document.getElementById(o);(r=(n=e==null?void 0:e.style)==null?void 0:n.removeProperty)==null||r.call(n,`--${t}`)},v=(o,t)=>{const e=s.useRef(o),n=s.useCallback(l=>{Object.keys(l).forEach(i=>{T(t)(i,l[i])}),e.current=l},[t]),r=s.useCallback(()=>e.current,[]),a=s.useCallback(l=>j(t)(l),[t]),f=s.useCallback((l,i)=>{T(t)(l,i),e.current={...e.current,[l]:i}},[t]),c=s.useCallback(l=>{P(t)(l);const i={...e.current};delete i[l],e.current=i},[t]),u=s.useMemo(()=>R(e.current),[]);return{setTheme:n,style:u,getTheme:r,getVariable:a,setVariable:f,removeVariable:c}},E=({children:o,theme:t,className:e,id:n,...r})=>{const a=s.useId(),f=n||a,{setTheme:c,style:u,getTheme:l,getVariable:i,setVariable:g,removeVariable:C}=v(t,f),{Provider:M}=h,S=s.useMemo(()=>({setTheme:c,getTheme:l,getVariable:i,setVariable:g,removeVariable:C}),[c,l,i,g,C]);return s.useEffect(()=>{c(t)},[t,c]),b.jsx(M,{value:S,children:b.jsx("div",{...r,id:f,className:e,style:u,children:o})})},V=s.forwardRef((o,t)=>{const{children:e,as:n="div",theme:r={},setTheme:a=()=>{},...f}=o,c=s.useMemo(()=>R(r),[r]);return s.useEffect(()=>{a(r)},[r,a]),s.createElement(n,{...f,style:c,ref:t},e)});V.displayName="LocalRoot";const I=()=>{const o=s.useRef(),t=s.useRef(null),e=s.useCallback(c=>{Object.keys(c).forEach(u=>{y(t.current)(u,c[u])}),o.current=c},[]),n=s.useCallback(()=>o.current,[]),r=s.useCallback(c=>{var u;return(u=o.current)==null?void 0:u[c]},[]),a=s.useCallback((c,u)=>{y(t.current)(c,u),o.current={...o.current,[c]:u}},[]),f=s.useMemo(()=>({children:c,...u})=>b.jsx(V,{...u,setTheme:e,ref:t,children:c}),[e]);return{setTheme:e,getTheme:n,LocalRoot:f,ref:t,getVariable:r,setVariable:a}};m.RootThemeProvider=E,m.useLocalTheme=I,m.useRootTheme=k,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.umd.cjs.map