'}),[]),title:d.a("Attribute Accumulation"),description:d.a("Feel free to use the same attribute multiple times. Compiler will merge them into one."),children:[]}),h({htmlCode:d.a((function(){return'<button\n ID="myDiv"\n onClick={() => alert(\'Hello World!\')}\n onclick={() => alert(\'Goodbye World!\')}\n innerHTML="Click Me"\n auto_focus\n/>'}),[]),title:d.a("Case Insensitivity"),description:d.a("Whatever the case you use for HTML attribute names, compiler will interpret them correctly."),children:[]}),h({htmlCode:d.a((function(){return'<video\n bind:currentTime={$progress}\n bind:duration={$duration}\n bind:paused={$isPaused}\n bind:volume={$volume}\n bind:muted={$isMuted}\n/>'}),[]),title:d.a("Bound Attributes"),description:d.a("Brought from Svelte, keep form controls and media elements attributes in sync with variables."),children:[]}),h({htmlCode:d.a((function(){return'<p\n color="red"\n font-size={20}\n font-weight="bold"\n text-align="center"\n text-decoration="underline"\n/>'}),[]),title:d.a("Attribute-Like Styles"),description:d.a("No problem if you want to define styles as attributes. Compiler can differentiate them from attributes."),children:[]}),h({htmlCode:d.a((function(){return'<Card\n title="Hello World"\n link="https://google.com"\n style:color="black"\n event:onClick={toggleBgColor}\n event:onClick={() => console.log("Card clicked!")}\n/>'}),[]),title:d.a("Component Styling"),description:d.a("Style components or add event listeners to them using attributes. No need to manipulate their definitions."),children:[]}),h({htmlCode:d.a((function(){return'<Range\n min={0}\n max={$duration || 0}\n step={1}\n disabled={false}\n $value={$progress}\n/>'}),[]),title:d.a("2-Way Binding"),description:d.a("Brought from Angular, keep parents and their children in communication with each other."),children:[]})])])])},x=function(){return d.j("div",[[function(n){n.className="relative mb-20 flex h-full min-h-full w-full flex-col items-center justify-center gap-4 px-6 pt-8 md:px-8"}]],[d.l((0,k)({htmlCode:d.a((function(){return'var $globalCounter = 0;\n$createEffect(() => {\n console.log("Global counter increased to", $globalCounter);\n});\nfunction Component() {\n var $localCounter = 0;\n var increment = function() {\n $globalCounter++;\n $localCounter++;\n };\n return (\n <div>\n <button onClick={increment}>\n Increment to {$localCounter}\n </button>\n </div>\n );\n}\n\nexport default Component;\nexport { $globalCounter }'}),[]),children:[]}),[[function(n){n.style.maxHeight="18rem"}]]),d.j("h1",[[function(n){n.className="w-fit bg-vivid-red bg-clip-text text-center text-4xl font-bold !leading-snug text-transparent sm:text-6xl"}]],[" Mango Framework "]),d.j("p",[[function(n){n.className="-mt-2 text-center text-base text-gray-100 sm:text-2xl"}]],[d.j("span",[[function(n){n.className=""}]],["A framework designed with performance and "]),d.j("span",[[function(n){n.className="inline-block"}]],["compatibility in mind."])]),d.j("ul",[[function(n){n.className="flex flex-col items-center justify-center gap-4 text-center text-gray-100 lg:flex-row"}]],[d.j("li",undefined,["👾 IE5+ Compatibility"]),d.j("li",undefined,["✨ 1.53kb (gzipped)"]),d.j("li",undefined,["🚀 Native DOM manipulation"]),d.j("li",undefined,["🤏 Negligible memory usage"])]),d.j("div",[[function(n){n.className="flex flex-row items-center justify-center gap-4"}]],[d.j("a",[[function(n){n.href="./docs"}]],[d.j("button",[[function(n){n.className="w-32 rounded-lg border-2 border-white bg-transparent py-1 text-gray-100"}]],[" Get Started "])]),d.j("a",[[function(n){n.href="https://github.com/GeeekyBoy/mango"}]],[d.j("button",[[function(n){n.className="w-32 rounded-lg border-2 border-white bg-transparent py-1 text-gray-100"}]],[" GitHub "])])])])};b="/assets/img/"+f("2y8xy").resolve()("7t3Zr");var y,w=function(){return d.j("div",[[function(n){n.className="sticky top-0 z-20 w-full bg-transparent"}]],[d.j("div",[[function(n){n.className="pointer-events-none absolute z-[-1] h-full w-full shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] backdrop-blur-md"}]]),d.j("nav",[[function(n){n.className="mx-auto flex h-16 max-w-[90rem] items-center justify-end gap-2 px-6"}]],[d.j("a",[[function(n){n.className="mr-auto flex items-center justify-center gap-2",n.href="/"}]],[d.j("img",[[function(n){n.src=(0,l(b)),n.style.height="32px",n.style.width="23.12px",n.alt="mango logo"}]]),d.j("span",[[function(n){n.className="text-2xl font-bold"}]],["Mango"])]),d.j("a",[[function(n){n.className="-ml-2 inline-block whitespace-nowrap p-2 text-sm font-semibold subpixel-antialiased",n.href="/docs"}]],[" Docs "]),d.j("a",[[function(n){n.className="-ml-2 inline-block whitespace-nowrap p-2 text-sm font-semibold subpixel-antialiased",n.href="https://github.com/GeeekyBoy/mango",n.target="_blank"}]],[" GitHub "])])])},j=function(){return d.j("footer",[[function(n){n.className="w-full justify-center px-4 pb-4 text-center text-sm leading-relaxed text-gray-400"}]],[d.j("p",[[function(n){n.className=""}]],[" Made with ❤️ by"," ",d.j("a",[[function(n){n.className="text-gray-100 hover:text-gray-200",n.href="https://github.com/GeeekyBoy",n.target="_blank"}]],[" GeeekyBoy "])," "," in Egypt ",d.j("br"),d.j("a",[[function(n){n.className="text-gray-100 hover:text-gray-200",n.href="https://github.com/microsoft/fluentui-emoji",n.target="_blank"}]],[" Fluent Emojis "])," "," designed by Microsoft ",d.j("br")," Copyright © ",(new Date).getFullYear()," GeeekyBoy & Mango Contributors "])])},N=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M10 5h4a2 2 0 1 0-4 0ZM8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.11A3.75 3.75 0 0 1 15.03 22H8.97a3.75 3.75 0 0 1-3.73-3.39L4.07 6.5H2.75a.75.75 0 0 1 0-1.5H8.5Zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM14.25 9c.41 0 .75.34.75.75v7.5a.75.75 0 0 1-1.5 0v-7.5c0-.41.34-.75.75-.75Zm-7.52 9.47a2.25 2.25 0 0 0 2.24 2.03h6.06c1.15 0 2.12-.88 2.24-2.03L18.42 6.5H5.58l1.15 11.97Z")}]],undefined,1)],1)};y="/assets/img/"+f("2y8xy").resolve()("6DYY7");var A=function(){var n=d.a(""),t=d.d([]),a=d.a(undefined),e=new Array(100).fill(0).map((function(n,t){return{id:t,name:"Joe Doe "+(t+1),email:"joedoe"+(t+1)+"@example.com"}}));return d.e(t,e),d.f((function(){d.e(t,e.filter((function(t){return t.name.toLowerCase().includes(d.b(n).toLowerCase())})))}),[n]),d.j("div",[[function(n){n.className="relative flex h-[420px] flex-col gap-2 overflow-auto text-gray-100"}]],[d.j("input",[[function(t){t.placeholder="Search by name...",t.className="rounded-md border-2 border-white bg-transparent p-2 text-gray-100 outline-none",t.oninput=function(t){t.target.$ru="value",d.c(n,t.target.value,t.target)}}],[function(t){"value"===t.$ru?t.$ru=null:t.value=d.b(n)},n]]),d.i((function(){return d.b(n)&&d.j("span",[[function(n){n.className="text-gray-100"}]],["Showing results for: ",d.i((function(){return d.b(n)}),[n])])}),[n]),d.j("div",[[function(n){n.className="flex h-full flex-col gap-2 overflow-auto"}]],[d.h(t,(function(n){return d.i((function(){return[d.j("div",[[function(t){t.className="flex flex-row gap-4 rounded-md border-2 border-white p-4 transition-colors "+((d.b(n).id===d.b(a)?"border-[#44ffcd]":"")||"")},n,a],[function(t){t.onclick=function(){return d.c(a,d.b(n).id)}}]],[d.j("div",[[function(n){n.className="flex flex-col justify-center"}]],[d.j("img",[[function(n){n.className="h-12 w-12 rounded-full bg-gray-300",n.src=(0,l(y))}],[function(t){t.alt="avatar of ".concat(d.b(n).name)},n]])]),d.j("div",[[function(n){n.className="flex flex-1 flex-col justify-center overflow-hidden"}]],[d.j("div",[[function(n){n.className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-bold text-gray-100"}]],(function(){return[function(){return d.b(n).name},[n]]})),d.j("div",[[function(n){n.className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-secondary"}]],(function(){return[function(){return d.b(n).email},[n]]}))]),d.j("div",[[function(n){n.className="flex flex-col justify-center"}]],[d.j("button",[[function(a){a.className="flex h-8 w-8 items-center justify-center rounded bg-transparent transition-colors",a.setAttribute("aria-label","remove item"),a.onclick=function(a){a.stopPropagation(),e.splice(e.indexOf(d.b(n)),1),d.e(t,e)}}]],[d.l((0,N)({children:[]}),[[function(t){t.style.fill=d.b(n).id===d.b(a)?"#44ffcd":"#ffffff"},n,a]])])])])]}))}))])])},_={easeInOutElastic:function(n){var t=2*Math.PI/4.5;return 0===n?0:1===n?1:n<.5?-Math.pow(2,20*n-10)*Math.sin((20*n-11.125)*t)/2:Math.pow(2,-20*n+10)*Math.sin((20*n-11.125)*t)/2+1},easeInOutExpo:function(n){return 0===n?0:1===n?1:n<.5?Math.pow(2,20*n-10)/2:(2-Math.pow(2,-20*n+10))/2}},C=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M7.6 4.61a.75.75 0 0 0-1.1.66v13.46c0 .56.6.93 1.1.65l12.37-6.72a.75.75 0 0 0 0-1.32L7.61 4.61ZM5 5.27c0-1.7 1.83-2.79 3.33-1.97l12.36 6.72a2.25 2.25 0 0 1 0 3.96L8.33 20.7A2.25 2.25 0 0 1 5 18.73V5.27Z")}]],undefined,1)],1)},M=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M6.25 3C5.01 3 4 4 4 5.25v13.5C4 19.99 5 21 6.25 21h2.5C9.99 21 11 20 11 18.75V5.25C11 4.01 10 3 8.75 3h-2.5ZM5.5 5.25c0-.41.34-.75.75-.75h2.5c.41 0 .75.34.75.75v13.5c0 .41-.34.75-.75.75h-2.5a.75.75 0 0 1-.75-.75V5.25ZM15.25 3C14.01 3 13 4 13 5.25v13.5c0 1.24 1 2.25 2.25 2.25h2.5c1.24 0 2.25-1 2.25-2.25V5.25C20 4.01 19 3 17.75 3h-2.5Zm-.75 2.25c0-.41.34-.75.75-.75h2.5c.41 0 .75.34.75.75v13.5c0 .41-.34.75-.75.75h-2.5a.75.75 0 0 1-.75-.75V5.25Z")}]],undefined,1)],1)},H=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M19.25 4.5c.14 0 .25.11.25.25v14.5c0 .14-.11.25-.25.25H4.75a.25.25 0 0 1-.25-.25V4.75c0-.14.11-.25.25-.25h14.5ZM4.75 3C3.78 3 3 3.78 3 4.75v14.5c0 .97.78 1.75 1.75 1.75h14.5c.97 0 1.75-.78 1.75-1.75V4.75C21 3.78 20.22 3 19.25 3H4.75Z")}]],undefined,1)],1)},F=function(){var n=d.a(0),t=d.a(1),a=d.a(0),e=d.a(1),s=d.a(0),o=d.a(1),c=d.a(0),i=d.a("--"),l=d.a(!0),p=!0;d.f((function(){var i=p?(0,_).easeInOutElastic:(0,_).easeInOutExpo;d.c(n,250*i(d.b(c))),d.c(t,1+.5*i(d.b(c))),d.c(a,250*i(d.b(c)+.04)),d.c(e,1+.5*i(d.b(c)+.04)),d.c(s,250*i(d.b(c)+.08)),d.c(o,1+.5*i(d.b(c)+.08))}),[t,n,c,e,a,o,s]);var u=50,r=function(){d.c(l,!0);var n=Date.now(),t=0,a=0;requestAnimationFrame((function e(){var s=Date.now();t=Math.round(1e3/(s-n)),a--<=0&&(d.c(i,t),a=20),n=s,d.b(l)?requestAnimationFrame(e):d.c(i,"--"),u-- >0||(p?d.b(c)+.006>=1?(d.c(c,1),p=!1,u=50):d.c(c,d.b(c)+.006):d.b(c)-.006<=0?(d.c(c,0),p=!0,u=50):d.c(c,d.b(c)-.006))}))},f=function(){d.c(l,!1),u=0},m=function(){f(),d.c(c,0),p=!0},g=function(){d.b(l)?f():r()};return r(),d.j("div",[[function(n){n.className="relative flex w-full flex-col items-center justify-center gap-4 m-auto"}]],[d.j("div",[[function(n){n.className="w-[300px]"}]],[d.j("div",[[function(n){n.className="relative mb-2 h-12 w-12 rounded-full bg-green-500"}],[function(a){a.style.transform="translateX(".concat(d.b(n),"px) scale(").concat(d.b(t),")")},t,n]]),d.j("div",[[function(n){n.className="relative mb-2 h-12 w-12 rounded-full bg-blue-500"}],[function(n){n.style.transform="translateX(".concat(d.b(a),"px) scale(").concat(d.b(e),")")},e,a]]),d.j("div",[[function(n){n.className="relative h-12 w-12 rounded-full bg-red-500"}],[function(n){n.style.transform="translateX(".concat(d.b(s),"px) scale(").concat(d.b(o),")")},o,s]])]),d.j("input",[[function(n){n.className="w-full",n.type="range",n.min="0",n.max="1",n.step="0.01",n.oninput=function(n){n.target.$ru="value",d.c(c,parseFloat(n.target.value),n.target)},n.setAttribute("aria-label","animation seek bar")}],[function(n){"value"===n.$ru?n.$ru=null:n.value=d.b(c)},c]]),d.j("div",[[function(n){n.className="flex flex-row gap-4"}]],[d.j("button",[[function(n){n.onclick=g,n.setAttribute("aria-label","toggle animation")}]],(function(){return[function(){return d.b(l)?d.l((0,M)({children:[]}),[[function(n){n.style.fill="#ffffff"}]]):d.l((0,C)({children:[]}),[[function(n){n.style.fill="#ffffff"}]])},[l]]})),d.j("button",[[function(n){n.onclick=m,n.setAttribute("aria-label","stop animation")}]],[d.l((0,H)({children:[]}),[[function(n){n.style.fill="#ffffff"}]])])]),d.j("span",[[function(n){n.className="text-xl text-gray-100"}]],[d.i((function(){return Math.round(100*d.b(c))}),[c]),"% @ ",d.i((function(){return d.b(i)}),[i])," fps "])])},$=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M3.28 2.22a.75.75 0 1 0-1.06 1.06L6.44 7.5H4.25C3.01 7.5 2 8.5 2 9.75v4.5c0 1.24 1 2.25 2.25 2.25h3.68c.18 0 .36.06.5.19l4.49 3.99c.8.72 2.08.14 2.08-.93v-3.69l5.72 5.72a.75.75 0 0 0 1.06-1.06L3.28 2.22ZM13.5 14.56v4.63l-4.08-3.63A2.25 2.25 0 0 0 7.93 15H4.25a.75.75 0 0 1-.75-.75v-4.5c0-.42.34-.75.75-.75h3.68l5.57 5.56Zm0-9.75v5.5l1.5 1.5V4.26a1.25 1.25 0 0 0-2.08-.93l-3.4 3.02 1.06 1.06 2.92-2.6Zm3.64 9.15 1.14 1.14a6.97 6.97 0 0 0-.12-6.43.75.75 0 0 0-1.32.72 5.47 5.47 0 0 1 .3 4.57Zm2.25 2.25 1.1 1.09a9.96 9.96 0 0 0-.45-11.25.75.75 0 0 0-1.2.9 8.46 8.46 0 0 1 .55 9.26Z")}]],undefined,1)],1)},E=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M14.7 3.44c.2.23.3.51.3.81v15.5a1.25 1.25 0 0 1-2.06.96L7.98 16.5H4.25c-1.24 0-2.25-1-2.25-2.25v-4.5C2 8.51 3 7.5 4.25 7.5h3.73l4.96-4.2a1.25 1.25 0 0 1 1.76.14ZM13.5 4.8 8.52 9H4.25a.75.75 0 0 0-.75.75v4.5c0 .41.34.75.75.75h4.27l4.98 4.21V4.8Zm3.6 3.85a.75.75 0 0 1 1.03.25c.58.94.87 2 .87 3.14 0 1.15-.3 2.2-.87 3.14a.75.75 0 1 1-1.28-.78c.43-.7.65-1.48.65-2.36 0-.88-.22-1.66-.65-2.36a.75.75 0 0 1 .25-1.03Z")}]],undefined,1)],1)},S=function(){return d.j("svg",[[function(n){n.style.width="24px",n.style.height="24px",n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("xmlns","http://www.w3.org/2000/svg")}]],[d.j("path",[[function(n){n.setAttribute("d","M15 4.25a1.25 1.25 0 0 0-2.08-.93L8.42 7.3a.75.75 0 0 1-.49.19H4.25C3.01 7.5 2 8.5 2 9.75v4.5c0 1.24 1 2.25 2.25 2.25h3.68c.18 0 .36.06.5.19l4.49 3.99c.8.72 2.08.14 2.08-.93V4.25ZM9.42 8.43l4.08-3.62v14.38l-4.08-3.63A2.25 2.25 0 0 0 7.93 15H4.25a.75.75 0 0 1-.75-.75v-4.5c0-.42.34-.75.75-.75h3.68c.55 0 1.08-.2 1.5-.57ZM19 5.9a.75.75 0 0 1 1.05.15 9.96 9.96 0 0 1 0 11.9.75.75 0 1 1-1.2-.9 8.46 8.46 0 0 0 0-10.1.75.75 0 0 1 .15-1.05Zm-1.85 2.47a.75.75 0 0 1 1.02.3 6.97 6.97 0 0 1 0 6.66.75.75 0 0 1-1.32-.72 5.47 5.47 0 0 0 0-5.22.75.75 0 0 1 .3-1.02Z")}]],undefined,1)],1)};"AKFKsvG_range__wrapper","AKFKsvG_range__thumb--holding","AKFKsvG_range__track__highlighted","AKFKsvG_range__track","AKFKsvG_range__thumb","AKFKsvG_root";var q,D=function(n){var t,a,e=function(n){c(n),s()},s=function(){f=a},o=function(){f=null},c=function(n){if(!f&&"touchstart"!==n.type&&"mousedown"!==n.type)return!1;var a,e;n.stopPropagation(),n.preventDefault(),a=n instanceof TouchEvent?n.touches[0].clientX:n.clientX,e=(e=100*(a-(d.b(u).getBoundingClientRect().left+10))/(t.clientWidth-10))<0?0:e>100?100:e,void d.c(p,e*(d.b(l)-d.b(i))/100+d.b(i))},i=n.min,l=n.max,p=n.$value,u=d.a(undefined),r=null,f=null;return d.f((function(){if(r&&a){d.c(p,d.b(p)>d.b(i)?d.b(p):d.b(i)),d.c(p,d.b(p)