{"version":3,"sources":["../../src/use-css-var/index.ts"],"sourcesContent":["import { useLatest } from '../use-latest'\nimport { useMount } from '../use-mount'\nimport { useMutationObserver } from '../use-mutation-observer'\nimport { useSafeState } from '../use-safe-state'\nimport { useStableFn } from '../use-stable-fn'\nimport { useTargetElement } from '../use-target-element'\nimport { isFunction } from '../utils/basic'\nimport { unwrapGettable } from '../utils/unwrap'\n\nimport type { SetStateAction } from 'react'\nimport type { ReactSetState } from '../use-safe-state'\nimport type { ElementTarget } from '../use-target-element'\nimport type { Gettable } from '../utils/basic'\n\nexport interface UseCssVarOptions {\n  /**\n   * default value of the CSS variable\n   *\n   * @defaultValue ''\n   */\n  defaultValue?: string\n  /**\n   * whether to observe the changes of the CSS variable\n   *\n   * @defaultValue false\n   */\n  observe?: boolean\n}\n\nexport type UseCssVarReturns = readonly [string, ReactSetState<string>]\n\n/**\n * A React Hook that allows you to use CSS variables in your components.\n */\nexport function useCssVar<T extends HTMLElement = HTMLElement>(\n  propName: Gettable<string>,\n  options: UseCssVarOptions = {},\n  target: ElementTarget<T> = () => document.documentElement as T,\n): UseCssVarReturns {\n  const { defaultValue = '', observe = false } = options\n\n  const [variable, _setVariable] = useSafeState(defaultValue)\n\n  const el = useTargetElement<T>(target)\n  const latest = useLatest({ variable, propName: unwrapGettable(propName), defaultValue })\n\n  const getPropertyValue = useStableFn(() => {\n    const { propName, defaultValue } = latest.current\n\n    if (el.current) {\n      const value = getCssVar(propName, el.current)\n      _setVariable(value || defaultValue)\n    }\n  })\n\n  const setVariable = useStableFn((value: SetStateAction<string>) => {\n    const { propName, variable } = latest.current\n    const newValue = isFunction(value) ? value(variable) : value\n\n    if (el.current?.style) {\n      el.current.style.setProperty(propName, newValue)\n    }\n\n    _setVariable(value)\n  })\n\n  useMount(() => void getPropertyValue())\n\n  useMutationObserver(observe ? el : null, getPropertyValue, { attributes: true })\n\n  return [variable, setVariable] as const\n}\n\nfunction getCssVar<T extends HTMLElement = HTMLElement>(propName: string, el: T): string {\n  return window.getComputedStyle(el).getPropertyValue(propName).trim()\n}\n"],"names":["useCssVar","propName","options","target","document","documentElement","defaultValue","observe","useSafeState","variable","_setVariable","el","useTargetElement","latest","useLatest","unwrapGettable","getPropertyValue","useStableFn","current","value","getCssVar","setVariable","newValue","isFunction","style","setProperty","useMount","useMutationObserver","attributes","window","getComputedStyle","trim"],"mappings":";;;;+BAkCgBA;;;eAAAA;;;yBAlCU;wBACD;mCACW;4BACP;2BACD;gCACK;qBACN;sBACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BxB,SAASA,UACdC,QAA0B;QAC1BC,UAAAA,iEAA4B,CAAC,GAC7BC,SAAAA,iEAA2B;eAAMC,SAASC,eAAe;;IAEzD,4BAA+CH,QAAvCI,cAAAA,kDAAe,+CAAwBJ,QAApBK,SAAAA,wCAAU;IAErC,IAAiCC,iCAAAA,IAAAA,0BAAY,EAACF,mBAAvCG,WAA0BD,kBAAhBE,eAAgBF;IAEjC,IAAMG,KAAKC,IAAAA,kCAAgB,EAAIT;IAC/B,IAAMU,SAASC,IAAAA,oBAAS,EAAC;QAAEL,UAAAA;QAAUR,UAAUc,IAAAA,sBAAc,EAACd;QAAWK,cAAAA;IAAa;IAEtF,IAAMU,mBAAmBC,IAAAA,wBAAW,EAAC;QACnC,IAAmCJ,kBAAAA,OAAOK,OAAO,EAAzCjB,aAA2BY,gBAA3BZ,UAAUK,eAAiBO,gBAAjBP;QAElB,IAAIK,GAAGO,OAAO,EAAE;YACd,IAAMC,QAAQC,UAAUnB,YAAUU,GAAGO,OAAO;YAC5CR,aAAaS,SAASb;QACxB;IACF;IAEA,IAAMe,cAAcJ,IAAAA,wBAAW,EAAC,SAACE;YAI3BR;QAHJ,IAA+BE,kBAAAA,OAAOK,OAAO,EAArCjB,aAAuBY,gBAAvBZ,UAAUQ,WAAaI,gBAAbJ;QAClB,IAAMa,WAAWC,IAAAA,iBAAU,EAACJ,SAASA,MAAMV,YAAYU;QAEvD,KAAIR,cAAAA,GAAGO,OAAO,cAAVP,kCAAAA,YAAYa,KAAK,EAAE;YACrBb,GAAGO,OAAO,CAACM,KAAK,CAACC,WAAW,CAACxB,YAAUqB;QACzC;QAEAZ,aAAaS;IACf;IAEAO,IAAAA,kBAAQ,EAAC;eAAM,KAAKV;;IAEpBW,IAAAA,wCAAmB,EAACpB,UAAUI,KAAK,MAAMK,kBAAkB;QAAEY,YAAY;IAAK;IAE9E,OAAO;QAACnB;QAAUY;KAAY;AAChC;AAEA,SAASD,UAA+CnB,QAAgB,EAAEU,EAAK;IAC7E,OAAOkB,OAAOC,gBAAgB,CAACnB,IAAIK,gBAAgB,CAACf,UAAU8B,IAAI;AACpE"}