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

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

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