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

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

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