{"version":3,"file":"index.cjs","names":["usePreferredColorScheme","useLocalStorage"],"sources":["../../../src/hooks/useColorScheme/index.ts"],"sourcesContent":["import { isFunction } from '@modern-kit/utils';\nimport { useLocalStorage } from '../useLocalStorage';\nimport { usePreferredColorScheme } from '../usePreferredColorScheme';\nimport { useCallback, useEffect } from 'react';\n\nconst COLOR_SCHEME_DEFAULT_KEY = 'color-scheme';\n\ntype ColorScheme = 'dark' | 'light';\n\ninterface UseColorSchemeReturnType {\n  colorScheme: ColorScheme;\n  preferredColorScheme: ColorScheme;\n  setToggleMode: () => void;\n  setDarkMode: () => void;\n  setLightMode: () => void;\n  setPreferredMode: () => void;\n}\n\ninterface UseColorSchemeOptions {\n  key?: string;\n  defaultValue?: (() => ColorScheme) | ColorScheme;\n  shouldSetBodyClass?: boolean;\n}\n\n/**\n * @description 사용자의 색상 테마(다크 모드 또는 라이트 모드)를 관리하기 위한 훅입니다.\n *\n * @param {UseColorSchemeOptions} [options={}] - 색상 테마를 관리를 위한 추가 옵션입니다.\n * - `key`: 스토리지에 저장 할 key 값입니다. 기본 값은 `'color-scheme'`입니다.\n * - `defaultValue`: 기본 값으로 셋팅 값입니다. `prefers-color-scheme`를 지원하지 않는 OS의 경우 혹은 외부에서 테마 값을 전달 받는 경우 `defaultValue`를 활용 할 수 있습니다.\n * - `shouldSetBodyClass`: document.body의 클래스에 색상 테마를 저장 할 여부를 결정하는 값입니다. 기본 값은 `false`입니다.\n *\n * @returns {UseColorSchemeReturnType}\n * - `colorScheme`: 현재 적용된 색상 테마(`dark`, `light`)입니다. 로컬 스토리지에 저장된 값이 있다면 해당 값을 가져옵니다.\n * 스토리지에 저장된 값이 없는 상황에서 `defaultValue`가 설정되어 있다면 우선적으로 `defaultValue` 값을 갖습니다.\n * 만약, `defaultValue`가 없다면 다음으로 사용자 선호 색상(`prefers-color-scheme`) 값을 가져옵니다.\n * - `preferredColorScheme`: 사용자의 선호 색상 테마입니다. 사용자 시스템 설정에 따라 달라집니다.\n * - `setToggleMode`: 현재 색상 테마를 `다크 모드`와 `라이트 모드` 사이에서 전환합니다.\n * - `setDarkMode`: 현제 색상 테마를 `다크 모드`로 설정합니다.\n * - `setLightMode`: 현재 색상 테마를 `라이트 모드`로 설정합니다.\n * - `setPreferredMode` - 현재 색상 테마를 사용자의 선호 색상(`prefers-color-scheme`)으로 설정합니다.\n *\n * @example\n * // 사용자의 선호 색상(`prefers-color-scheme`)이 Light 모드인 경우\n * const {\n *  colorScheme,\n *  preferredColorScheme,\n *  setDarkMode,\n *  setLightMode,\n *  setToggleMode,\n *  setPreferredMode\n * } = useColorScheme();\n *\n * // 초기 상태\n * // colorScheme: 'light', preferredColorScheme; // 'light'\n *\n * // 스트리지 저장\n * setToggleMode(); // colorScheme: 'dark', preferredColorScheme: 'light'\n * setLightMode(); // colorScheme: 'light', preferredColorScheme: 'light'\n * setDarkMode(); // colorScheme: 'dark', preferredColorScheme: 'light'\n * setPreferredMode(); // colorScheme: 'light', preferredColorScheme: 'light'\n *\n * @example\n * // 옵션 설정\n * // 앱에서 userAgent로 dark mode 관련 프로퍼티를 전달 받아서 사용하는 경우\n * const userAgent = window.navigator.userAgent\n *\n * useColorScheme({\n *   key: 'custom-key', // 스토리지에 저장 할 key입니다.\n *   defaultValue: userAgent.includes('{Dark Mode Property}') ? 'dark' : 'light',\n *   shouldSetBodyClass: true, // document.body 클래스에 colorScheme을 셋팅합니다.\n * });\n */\nexport function useColorScheme({\n  defaultValue,\n  key = COLOR_SCHEME_DEFAULT_KEY,\n  shouldSetBodyClass = false,\n}: UseColorSchemeOptions = {}): UseColorSchemeReturnType {\n  const preferredColorScheme = usePreferredColorScheme();\n  const defaultValueToUse = isFunction(defaultValue)\n    ? defaultValue()\n    : defaultValue;\n\n  const { state: colorScheme, setState: setColorScheme } =\n    useLocalStorage<ColorScheme>({\n      key,\n      initialValue: defaultValueToUse ?? preferredColorScheme,\n    });\n\n  const setToggleMode = useCallback(() => {\n    setColorScheme((prev) => (prev === 'dark' ? 'light' : 'dark'));\n  }, [setColorScheme]);\n\n  const setDarkMode = useCallback(() => {\n    setColorScheme('dark');\n  }, [setColorScheme]);\n\n  const setLightMode = useCallback(() => {\n    setColorScheme('light');\n  }, [setColorScheme]);\n\n  const setPreferredMode = useCallback(() => {\n    setColorScheme(preferredColorScheme);\n  }, [setColorScheme, preferredColorScheme]);\n\n  useEffect(() => {\n    if (shouldSetBodyClass) {\n      document.body.classList.add(colorScheme);\n    }\n    return () => {\n      if (shouldSetBodyClass) {\n        document.body.classList.remove(colorScheme);\n      }\n    };\n  }, [colorScheme, shouldSetBodyClass]);\n\n  return {\n    colorScheme,\n    preferredColorScheme,\n    setToggleMode,\n    setDarkMode,\n    setLightMode,\n    setPreferredMode,\n  };\n}\n"],"mappings":";;;;;;AAKA,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEjC,SAAgB,eAAe,EAC7B,cACA,MAAM,0BACN,qBAAqB,UACI,EAAE,EAA4B;CACvD,MAAM,uBAAuBA,gBAAAA,yBAAyB;CAKtD,MAAM,EAAE,OAAO,aAAa,UAAU,mBACpCC,cAAAA,gBAA6B;EAC3B;EACA,gBAAA,GAAA,kBAAA,YAPiC,aAAa,GAC9C,cAAc,GACd,iBAKmC;EACpC,CAAC;CAEJ,MAAM,iBAAA,GAAA,MAAA,mBAAkC;EACtC,gBAAgB,SAAU,SAAS,SAAS,UAAU,OAAQ;IAC7D,CAAC,eAAe,CAAC;CAEpB,MAAM,eAAA,GAAA,MAAA,mBAAgC;EACpC,eAAe,OAAO;IACrB,CAAC,eAAe,CAAC;CAEpB,MAAM,gBAAA,GAAA,MAAA,mBAAiC;EACrC,eAAe,QAAQ;IACtB,CAAC,eAAe,CAAC;CAEpB,MAAM,oBAAA,GAAA,MAAA,mBAAqC;EACzC,eAAe,qBAAqB;IACnC,CAAC,gBAAgB,qBAAqB,CAAC;CAE1C,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,oBACF,SAAS,KAAK,UAAU,IAAI,YAAY;EAE1C,aAAa;GACX,IAAI,oBACF,SAAS,KAAK,UAAU,OAAO,YAAY;;IAG9C,CAAC,aAAa,mBAAmB,CAAC;CAErC,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD"}