UNPKG

@mayank1513/nthul

Version:

Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.

3 lines (2 loc) 3.25 kB
"use client"; "use strict";var v=Object.create;var f=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var s in t)f(e,s,{get:t[s],enumerable:!0})},y=(e,t,s,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of $(t))!x.call(e,r)&&r!==s&&f(e,r,{get:()=>t[r],enumerable:!(n=L(t,r))||n.enumerable});return e};var M=(e,t,s)=>(s=e!=null?v(b(e)):{},y(t||!e||!e.__esModule?f(s,"default",{value:e,enumerable:!0}):s,e)),D=e=>y(f({},"__esModule",{value:!0}),e);var N={};w(N,{ColorSwitch:()=>F,ThemeSwitcher:()=>z});module.exports=D(N);var C=M(require("r18gs")),h="nthul",A={c:"system",s:"light",t:""},p=e=>(0,C.default)(e!=null?e:h,A);var d=require("react"),u=d.useEffect,R=e=>{u(()=>{let t=matchMedia("(prefers-color-scheme: dark)"),s=()=>{e(n=>({...n,s:t.matches?"dark":"light"}))};return s(),t.addEventListener("change",s),()=>{t.removeEventListener("change",s)}},[e])},T=e=>{let t=(e!=null?e:",system").split(",");return{t:t[0],c:t[1]}},g=0,H=(e,t,s)=>{u(()=>{if(t)return;g=Date.now();let n=s!=null?s:h;e(o=>({...o,...T(localStorage.getItem(n))}));let r=o=>{o.key===n&&e(c=>({...c,...T(o.newValue)}))};return addEventListener("storage",r),()=>{removeEventListener("storage",r)}},[t,e,s])},U=(e="none",t)=>{let s=document,n=s.createElement("style"),r=`transition: ${e.split(";")[0]} !important;`,o=t?`#${t},#${t} *,#${t} ~ *,#${t} ~ * *`:"*";return n.appendChild(s.createTextNode(`${o}{-webkit-${r}-moz-${r}-o-${r}-ms-${r}${r}}`)),s.head.appendChild(n),()=>{getComputedStyle(s.body),setTimeout(()=>{s.head.removeChild(n)},1)}},_=(e,t,s,n)=>{let r=["dark","light",`th-${t}`,s];n&&(r=r.map(o=>{var c;return(c=n[o])!=null?c:o})),e.forEach(o=>{o==null||o.classList.remove(r[0]),o==null||o.classList.remove(r[1]),o==null||o.classList.forEach(c=>{/(?:^|_)th-/.test(c)&&o.classList.remove(c)}),o==null||o.classList.add(r[2]),o==null||o.classList.add(r[3])})},G=(e,t,s,n)=>{let{t:r,c:o,s:c}=e,i=o==="system"?c:o,a=t!=null?t:h,S=!1,m=document,l=m.getElementById(a);S=!s&&(l==null?void 0:l.getAttribute("data-nth"))==="next";let E=t?[l]:[l,m.documentElement];_(E,r,i,n),S&&(m.cookie=`${a}=${r},${i}; max-age=31536000; SameSite=Strict;`)},z=({targetId:e,dontSync:t,themeTransition:s,styles:n})=>{if(e==="")throw new Error("id can not be an empty string");let[r,o]=p(e);return R(o),H(o,t,e),u(()=>{let c=U(s,e);if(G(r,e,t,n),!t&&g<Date.now()-300){let{t:i,c:a}=r,S=[i,a].join(","),m=e!=null?e:h;localStorage.setItem(m,S)}c()},[t,n,e,r,s]),null};var P=e=>{let[t,s]=p(e),{c:n,s:r,t:o}=t;return{theme:o,colorSchemePreference:n,systemColorScheme:r,resolvedColorScheme:n==="system"?r:n,setColorSchemePreference:c=>{s({...t,c})},setTheme:c=>{s({...t,t:c})}}};var k=require("react/jsx-runtime"),F=({targetId:e,skipSystem:t,size:s,...n})=>{let{setColorSchemePreference:r,resolvedColorScheme:o,colorSchemePreference:c}=P(e),i=()=>{switch(c){case"dark":r("light");break;case"light":r(t?"dark":"system");break;case"system":default:r("dark");break}};return(0,k.jsx)("button",{className:["nthul--color-switch",o,c==="system"?"system":""].join(" "),...n,onClick:i,style:{"--size":`${s}px`},type:"button"})};0&&(module.exports={ColorSwitch,ThemeSwitcher});