import{s as Rs,ae as Ne,af as As,f as o,l as f,a as i,g as p,h as A,m as h,d as s,c as r,D as u,j as x,k as qt,i as n,r as d}from"./scheduler.2f9f1739.js";import{S as js,i as qs,b as F,d as b,m as B,a as g,t as k,e as w}from"./index.f9f1dac6.js";import{g as zs,a as Es}from"./styles.a749dd55.js";import{M as Ks}from"./MarkdownLayout.50a9a114.js";import{L as C}from"./link.4e908ad9.js";import{I as Ds}from"./image.a4587660.js";function Us(m){let l;return{c(){l=f("shadcn-ui")},l(a){l=h(a,"shadcn-ui")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Gs(m){let l;return{c(){l=f("cmdk")},l(a){l=h(a,"cmdk")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Os(m){let l;return{c(){l=f("kbar")},l(a){l=h(a,"kbar")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Ws(m){let l;return{c(){l=f("kbar")},l(a){l=h(a,"kbar")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Ns(m){let l;return{c(){l=f("yaqeen.me")},l(a){l=h(a,"yaqeen.me")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Ys(m){let l;return{c(){l=f("https://kbar-mini.vercel.app/")},l(a){l=h(a,"https://kbar-mini.vercel.app/")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Qs(m){let l;return{c(){l=f("https://github.com/Abdulmumin1/kbar-svelte-mini")},l(a){l=h(a,"https://github.com/Abdulmumin1/kbar-svelte-mini")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Js(m){let l;return{c(){l=f("kamal")},l(a){l=h(a,"kamal")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Vs(m){let l;return{c(){l=f("@rockpadStudios")},l(a){l=h(a,"@rockpadStudios")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Xs(m){let l;return{c(){l=f("@timcchang")},l(a){l=h(a,"@timcchang")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function Zs(m){let l;return{c(){l=f("@huntabyte")},l(a){l=h(a,"@huntabyte")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function tn(m){let l;return{c(){l=f("@winnerfavour")},l(a){l=h(a,"@winnerfavour")},m(a,c){n(a,l,c)},d(a){a&&s(l)}}}function en(m){let l,a,c,V,$,_,At,E,Pe,Ut,D,Me,S,Ae,Gt,X,Ye="Introducing kbar-svelte-mini;",Ot,Z,Qe="A super duper lightweight package to easily implement a disposable navigation (ctr+k/cmd+k navigation or menu) system for your Svelte application.",Wt,tt,Je="To build this package, I set out with three (3) goals in mind:",Nt,et,Ve="<li>Easy to Implement,</li> <li>Should be customizable,</li> <li>and ofcouse, be super accessible.</li>",Yt,st,Xe="Easy to Implement;",Qt,R,Ee,j,De,Jt,nt,Ze="<strong>Install kbar-svelte-mini;</strong>",Vt,I,ts='<code><span class="line"><span style="color: #B392F0">npm </span><span style="color: #9DB1C5">i</span><span style="color: #B392F0"> </span><span style="color: #9DB1C5">kbar-svelte-mini</span></span></code>',Xt,lt,es="<strong>In your root</strong> <code>+layout.svelte</code>",Zt,T,ss='<code><span class="line"><span style="color: #F97583">import</span><span style="color: #B392F0"> { KDialog } </span><span style="color: #F97583">from</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;kbar-svelte-mini&#39;</span><span style="color: #B392F0">;</span></span></code>',te,at,ns="<strong>Define your actions</strong>",ee,L,ls=`<code><span class="line"><span style="color: #F97583">let</span><span style="color: #B392F0"> actions </span><span style="color: #F97583">=</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">	title</span><span style="color: #F97583">:</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;Home&#39;</span><span style="color: #BBBBBB">,</span></span>
<span class="line"><span style="color: #B392F0">	subtitle</span><span style="color: #F97583">:</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;Subtitle if needed&#39;</span><span style="color: #BBBBBB">,</span></span>
<span class="line"><span style="color: #B392F0">	callback</span><span style="color: #F97583">:</span><span style="color: #B392F0"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #79B8FF">window</span><span style="color: #B392F0">.</span><span style="color: #79B8FF">location</span><span style="color: #B392F0">.href </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;/&#39;</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">	}</span></span>
<span class="line"><span style="color: #B392F0">};</span></span></code>`,se,ot,as="Nested actions:",ne,H,os=`<code><span class="line"><span style="color: #F97583">let</span><span style="color: #B392F0"> actions </span><span style="color: #F97583">=</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">	title</span><span style="color: #F97583">:</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;Change Theme&#39;</span><span style="color: #BBBBBB">,</span></span>
<span class="line"><span style="color: #B392F0">	nested</span><span style="color: #F97583">:</span><span style="color: #B392F0"> [</span></span>
<span class="line"><span style="color: #B392F0">		{</span></span>
<span class="line"><span style="color: #B392F0">			title</span><span style="color: #F97583">:</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;Light&#39;</span><span style="color: #BBBBBB">,</span></span>
<span class="line"><span style="color: #B392F0">			callback</span><span style="color: #F97583">:</span><span style="color: #B392F0"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">				changeMode(</span><span style="color: #FFAB70">&#39;light&#39;</span><span style="color: #B392F0">);</span></span>
<span class="line"><span style="color: #B392F0">			}</span></span>
<span class="line"><span style="color: #B392F0">		}</span><span style="color: #BBBBBB">,</span></span>
<span class="line"><span style="color: #B392F0">		{</span></span>
<span class="line"><span style="color: #B392F0">			title</span><span style="color: #F97583">:</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;Dark&#39;</span><span style="color: #BBBBBB">,</span></span>
<span class="line"><span style="color: #B392F0">			callback</span><span style="color: #F97583">:</span><span style="color: #B392F0"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">				changeMode(</span><span style="color: #FFAB70">&#39;Dark&#39;</span><span style="color: #B392F0">);</span></span>
<span class="line"><span style="color: #B392F0">			}</span></span>
<span class="line"><span style="color: #B392F0">		}</span></span>
<span class="line"><span style="color: #B392F0">	]</span></span>
<span class="line"><span style="color: #B392F0">};</span></span></code>`,le,pt,ps="Finally, you can pass those actions to the component:",ae,P,is='<code><span class="line"><span style="color: #B392F0">&lt;</span><span style="color: #79B8FF">KDialog</span><span style="color: #B392F0"> {actions} /&gt;</span></span></code>',oe,it,rs="The result:",pe,Et,rt,ie,ct,cs="With this simple setup, you have a universally available <code>ctrl+k/cmd+k</code> with super good styling for your website. Also the universal search is just dope, It can hunt any action no matter how deeply nested It Is, In a lightning speed.",re,ut,us="Should be “Customizable”;",ce,mt,ms="While I was going to make it the easiest thing to Implement, It Is also Important to address the Issue with the default design blending in with the rest of your application.",ue,ft,fs="The method I choose for this is using custom variables, so you can customize what is necessary, Apple’s way, Anyone?",me,ht,hs="Available options are:",fe,$t,$s="<li><code>--bg</code>: Change the background to fit your application.</li> <li><code>--kbar-primary</code>: Primary color for your app, used for text and border highlight.</li> <li><code>--kbar-gray</code>: Color for dimmed texts.</li> <li><code>--kbar-search</code>: Search bar text color, primary color used in the absence.</li> <li><code>--shadow</code>: Control the shadow of the dialog.</li>",he,dt,ds="<strong>Example:</strong>",$e,q,Se,z,Re,de,M,ys=`<code><span class="line"><span style="color: #B392F0">&lt;</span><span style="color: #79B8FF">KDialog</span></span>
<span class="line"><span style="color: #B392F0">	{actions}</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">--bg</span><span style="color: #F97583">=</span><span style="color: #B392F0">{</span><span style="color: #FFAB70">&#39;#1c1917&#39;</span><span style="color: #B392F0">}</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">--kbar-primary</span><span style="color: #F97583">=</span><span style="color: #B392F0">{</span><span style="color: #FFAB70">&#39;#f97316&#39;</span><span style="color: #B392F0">}</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">--kbar-gray</span><span style="color: #F97583">=</span><span style="color: #B392F0">{</span><span style="color: #FFAB70">&#39;#1c1917&#39;</span><span style="color: #B392F0">}</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">--shadow</span><span style="color: #F97583">=</span><span style="color: #B392F0">{</span><span style="color: #FFAB70">&#39;0px 0px 0px black&#39;</span><span style="color: #B392F0">}</span></span>
<span class="line"><span style="color: #B392F0">/&gt;</span></span></code>`,ye,yt,_s="I disabled the shadow for mine, due to my no shadow designs.",_e,Dt,_t,ve,vt,vs="<p>The naming is quite weird, I didn’t give it much thought when building, apologies 🙏.</p>",Fe,Ft,Fs="Super Accessible;",be,bt,bs="This is really Important when building a UI component package of any kind, you’re obliged to take care of this, I could not escape either.",Be,Bt,Bs="Also, another aspect to this is keyboard navigation, since the original goal of this navigation system, I believe is to give a mouse free experience.",ge,gt,gs="The way it works on kbar-svelte-mini is:",ke,kt,ks="<li>Focus the first item, either when you open the dialog, or when you search,</li> <li>Hovering on Item/action, It moves the focus to that Item.</li> <li>You can use the up/down arrow keys to navigate up/down.</li>",we,wt,ws="Yo, there you have it! kbar-svelte-mini 🎉, Looking forward to exciting stuff you guys are going to build with this.",xe,xt,xs="Want to Improve kbar-svelte-mini? Use GitHub Issues, Pull Request, send me a DM, email, however you like it.",Ce,K,St,Cs="Docs:",je,U,Ie,G,Rt,Is="Github",qe,O,Te,y,jt,Ts="Shout out to",ze,W,Ke,N,Ue,Y,Ge,Q,Oe,J,We,Le,Ct,Ls="<strong>Peace ✌️</strong>",He;return c=new C({props:{href:"https://ui.shadcn.com/",rel:"nofollow",$$slots:{default:[Us]},$$scope:{ctx:m}}}),E=new C({props:{href:"https://www.cmdk-sv.com/",rel:"nofollow",$$slots:{default:[Gs]},$$scope:{ctx:m}}}),S=new C({props:{href:"https://kbar.vercel.app/",rel:"nofollow",$$slots:{default:[Os]},$$scope:{ctx:m}}}),j=new C({props:{href:"https://kbar.vercel.app/",rel:"nofollow",$$slots:{default:[Ws]},$$scope:{ctx:m}}}),rt=new Ds({props:{src:"https://paper-attachments.dropboxusercontent.com/s_A1CBA09559F628565D0B6DD8F43F54B5023D16EE68ECDDF4B3F0E2204C58A5C5_1707512315038_kbar-demo.gif",alt:"Kbar-svelte-mini demo"}}),z=new C({props:{href:"https://yaqeen.me/",rel:"nofollow",$$slots:{default:[Ns]},$$scope:{ctx:m}}}),_t=new Ds({props:{src:"https://paper-attachments.dropboxusercontent.com/s_A1CBA09559F628565D0B6DD8F43F54B5023D16EE68ECDDF4B3F0E2204C58A5C5_1707512428618_kbar-yaqeen.gif",alt:"kbar-svelte-mini demo yaqeen.me"}}),U=new C({props:{href:"https://kbar-mini.vercel.app/",rel:"nofollow",$$slots:{default:[Ys]},$$scope:{ctx:m}}}),O=new C({props:{href:"https://github.com/Abdulmumin1/kbar-svelte-mini",rel:"nofollow",$$slots:{default:[Qs]},$$scope:{ctx:m}}}),W=new C({props:{href:"https://vector-walls.vercel.app/",rel:"nofollow",$$slots:{default:[Js]},$$scope:{ctx:m}}}),N=new C({props:{href:"https://twitter.com/@Rockpadstudios",rel:"nofollow",$$slots:{default:[Vs]},$$scope:{ctx:m}}}),Y=new C({props:{href:"https://twitter.com/timcchang",rel:"nofollow",$$slots:{default:[Xs]},$$scope:{ctx:m}}}),Q=new C({props:{href:"https://twitter.com/huntabyte",rel:"nofollow",$$slots:{default:[Zs]},$$scope:{ctx:m}}}),J=new C({props:{href:"https://twitter.com/winnerfavour",rel:"nofollow",$$slots:{default:[tn]},$$scope:{ctx:m}}}),{c(){l=o("p"),a=f("Recently I was working on a project, and I want to have the super nice ctrl+k or cmd+k (for mac users) navigation/menu on the website, but there is a problem, similar to why most use "),F(c.$$.fragment),V=f(", I also want something that is gives great result with less effort."),$=i(),_=o("p"),At=f("I stumbled across a super powerful packages that will help me with the implementation ("),F(E.$$.fragment),Pe=f("), and I love It to be honest, but then I have to do alot of manual work, which feels like a lot considering that I’m just trying to build a simple menu system and not some complicated or god mod kind of menu."),Ut=i(),D=o("p"),Me=f("The nice one I found that could do this is, "),F(S.$$.fragment),Ae=f(", and It cool, but I use Svelte not React. Lucky for us Svelte devs, I took on the job to port something similar to Svelte, a package that Is designed to just be plugged and played."),Gt=i(),X=o("h2"),X.textContent=Ye,Ot=i(),Z=o("p"),Z.textContent=Qe,Wt=i(),tt=o("p"),tt.textContent=Je,Nt=i(),et=o("ul"),et.innerHTML=Ve,Yt=i(),st=o("h3"),st.textContent=Xe,Qt=i(),R=o("p"),Ee=f("The solution I came up with, also credits to "),F(j.$$.fragment),De=f(", Is for you to only think about the structure of your actions or you can call it menu. We should be able to take care of the rest. The result of that:"),Jt=i(),nt=o("p"),nt.innerHTML=Ze,Vt=i(),I=o("pre"),I.innerHTML=ts,Xt=i(),lt=o("p"),lt.innerHTML=es,Zt=i(),T=o("pre"),T.innerHTML=ss,te=i(),at=o("p"),at.innerHTML=ns,ee=i(),L=o("pre"),L.innerHTML=ls,se=i(),ot=o("p"),ot.textContent=as,ne=i(),H=o("pre"),H.innerHTML=os,le=i(),pt=o("p"),pt.textContent=ps,ae=i(),P=o("pre"),P.innerHTML=is,oe=i(),it=o("p"),it.textContent=rs,pe=i(),Et=o("p"),F(rt.$$.fragment),ie=i(),ct=o("p"),ct.innerHTML=cs,re=i(),ut=o("h3"),ut.textContent=us,ce=i(),mt=o("p"),mt.textContent=ms,ue=i(),ft=o("p"),ft.textContent=fs,me=i(),ht=o("p"),ht.textContent=hs,fe=i(),$t=o("ul"),$t.innerHTML=$s,he=i(),dt=o("p"),dt.innerHTML=ds,$e=i(),q=o("p"),Se=f("For the menu on my website "),F(z.$$.fragment),Re=f(", Here are the colors for it."),de=i(),M=o("pre"),M.innerHTML=ys,ye=i(),yt=o("p"),yt.textContent=_s,_e=i(),Dt=o("p"),F(_t.$$.fragment),ve=i(),vt=o("blockquote"),vt.innerHTML=vs,Fe=i(),Ft=o("h3"),Ft.textContent=Fs,be=i(),bt=o("p"),bt.textContent=bs,Be=i(),Bt=o("p"),Bt.textContent=Bs,ge=i(),gt=o("p"),gt.textContent=gs,ke=i(),kt=o("ul"),kt.innerHTML=ks,we=i(),wt=o("p"),wt.textContent=ws,xe=i(),xt=o("p"),xt.textContent=xs,Ce=i(),K=o("p"),St=o("strong"),St.textContent=Cs,je=i(),F(U.$$.fragment),Ie=i(),G=o("p"),Rt=o("strong"),Rt.textContent=Is,qe=f(": "),F(O.$$.fragment),Te=i(),y=o("p"),jt=o("strong"),jt.textContent=Ts,ze=f(": "),F(W.$$.fragment),Ke=f(" from "),F(N.$$.fragment),Ue=f(", "),F(Y.$$.fragment),Ge=f(", "),F(Q.$$.fragment),Oe=f(", "),F(J.$$.fragment),We=f("."),Le=i(),Ct=o("p"),Ct.innerHTML=Ls,this.h()},l(t){l=p(t,"P",{});var e=A(l);a=h(e,"Recently I was working on a project, and I want to have the super nice ctrl+k or cmd+k (for mac users) navigation/menu on the website, but there is a problem, similar to why most use "),b(c.$$.fragment,e),V=h(e,", I also want something that is gives great result with less effort."),e.forEach(s),$=r(t),_=p(t,"P",{});var It=A(_);At=h(It,"I stumbled across a super powerful packages that will help me with the implementation ("),b(E.$$.fragment,It),Pe=h(It,"), and I love It to be honest, but then I have to do alot of manual work, which feels like a lot considering that I’m just trying to build a simple menu system and not some complicated or god mod kind of menu."),It.forEach(s),Ut=r(t),D=p(t,"P",{});var Tt=A(D);Me=h(Tt,"The nice one I found that could do this is, "),b(S.$$.fragment,Tt),Ae=h(Tt,", and It cool, but I use Svelte not React. Lucky for us Svelte devs, I took on the job to port something similar to Svelte, a package that Is designed to just be plugged and played."),Tt.forEach(s),Gt=r(t),X=p(t,"H2",{"data-svelte-h":!0}),u(X)!=="svelte-dry7rx"&&(X.textContent=Ye),Ot=r(t),Z=p(t,"P",{"data-svelte-h":!0}),u(Z)!=="svelte-1fuc7dl"&&(Z.textContent=Qe),Wt=r(t),tt=p(t,"P",{"data-svelte-h":!0}),u(tt)!=="svelte-1kr1y5l"&&(tt.textContent=Je),Nt=r(t),et=p(t,"UL",{"data-svelte-h":!0}),u(et)!=="svelte-wxpwc"&&(et.innerHTML=Ve),Yt=r(t),st=p(t,"H3",{"data-svelte-h":!0}),u(st)!=="svelte-1oc6jb3"&&(st.textContent=Xe),Qt=r(t),R=p(t,"P",{});var Lt=A(R);Ee=h(Lt,"The solution I came up with, also credits to "),b(j.$$.fragment,Lt),De=h(Lt,", Is for you to only think about the structure of your actions or you can call it menu. We should be able to take care of the rest. The result of that:"),Lt.forEach(s),Jt=r(t),nt=p(t,"P",{"data-svelte-h":!0}),u(nt)!=="svelte-68p9dh"&&(nt.innerHTML=Ze),Vt=r(t),I=p(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),u(I)!=="svelte-xcozkp"&&(I.innerHTML=ts),Xt=r(t),lt=p(t,"P",{"data-svelte-h":!0}),u(lt)!=="svelte-e5nb56"&&(lt.innerHTML=es),Zt=r(t),T=p(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),u(T)!=="svelte-1c1fn4s"&&(T.innerHTML=ss),te=r(t),at=p(t,"P",{"data-svelte-h":!0}),u(at)!=="svelte-123f2g0"&&(at.innerHTML=ns),ee=r(t),L=p(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),u(L)!=="svelte-ner3lo"&&(L.innerHTML=ls),se=r(t),ot=p(t,"P",{"data-svelte-h":!0}),u(ot)!=="svelte-vdg4gm"&&(ot.textContent=as),ne=r(t),H=p(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),u(H)!=="svelte-11udpll"&&(H.innerHTML=os),le=r(t),pt=p(t,"P",{"data-svelte-h":!0}),u(pt)!=="svelte-jfii3a"&&(pt.textContent=ps),ae=r(t),P=p(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),u(P)!=="svelte-pmwocu"&&(P.innerHTML=is),oe=r(t),it=p(t,"P",{"data-svelte-h":!0}),u(it)!=="svelte-16z23im"&&(it.textContent=rs),pe=r(t),Et=p(t,"P",{});var zt=A(Et);b(rt.$$.fragment,zt),zt.forEach(s),ie=r(t),ct=p(t,"P",{"data-svelte-h":!0}),u(ct)!=="svelte-mda99n"&&(ct.innerHTML=cs),re=r(t),ut=p(t,"H3",{"data-svelte-h":!0}),u(ut)!=="svelte-1macjtq"&&(ut.textContent=us),ce=r(t),mt=p(t,"P",{"data-svelte-h":!0}),u(mt)!=="svelte-au75fy"&&(mt.textContent=ms),ue=r(t),ft=p(t,"P",{"data-svelte-h":!0}),u(ft)!=="svelte-9rcpok"&&(ft.textContent=fs),me=r(t),ht=p(t,"P",{"data-svelte-h":!0}),u(ht)!=="svelte-wu73r1"&&(ht.textContent=hs),fe=r(t),$t=p(t,"UL",{"data-svelte-h":!0}),u($t)!=="svelte-eazc3r"&&($t.innerHTML=$s),he=r(t),dt=p(t,"P",{"data-svelte-h":!0}),u(dt)!=="svelte-9sr4u1"&&(dt.innerHTML=ds),$e=r(t),q=p(t,"P",{});var Ht=A(q);Se=h(Ht,"For the menu on my website "),b(z.$$.fragment,Ht),Re=h(Ht,", Here are the colors for it."),Ht.forEach(s),de=r(t),M=p(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),u(M)!=="svelte-1r3xoyq"&&(M.innerHTML=ys),ye=r(t),yt=p(t,"P",{"data-svelte-h":!0}),u(yt)!=="svelte-h3t4oz"&&(yt.textContent=_s),_e=r(t),Dt=p(t,"P",{});var Kt=A(Dt);b(_t.$$.fragment,Kt),Kt.forEach(s),ve=r(t),vt=p(t,"BLOCKQUOTE",{"data-svelte-h":!0}),u(vt)!=="svelte-ssqpup"&&(vt.innerHTML=vs),Fe=r(t),Ft=p(t,"H3",{"data-svelte-h":!0}),u(Ft)!=="svelte-k61vke"&&(Ft.textContent=Fs),be=r(t),bt=p(t,"P",{"data-svelte-h":!0}),u(bt)!=="svelte-svkr72"&&(bt.textContent=bs),Be=r(t),Bt=p(t,"P",{"data-svelte-h":!0}),u(Bt)!=="svelte-1fgrmeq"&&(Bt.textContent=Bs),ge=r(t),gt=p(t,"P",{"data-svelte-h":!0}),u(gt)!=="svelte-20ies4"&&(gt.textContent=gs),ke=r(t),kt=p(t,"UL",{"data-svelte-h":!0}),u(kt)!=="svelte-5hzmka"&&(kt.innerHTML=ks),we=r(t),wt=p(t,"P",{"data-svelte-h":!0}),u(wt)!=="svelte-1bl2uew"&&(wt.textContent=ws),xe=r(t),xt=p(t,"P",{"data-svelte-h":!0}),u(xt)!=="svelte-1oh3okd"&&(xt.textContent=xs),Ce=r(t),K=p(t,"P",{});var Pt=A(K);St=p(Pt,"STRONG",{"data-svelte-h":!0}),u(St)!=="svelte-r13zfn"&&(St.textContent=Cs),je=r(Pt),b(U.$$.fragment,Pt),Pt.forEach(s),Ie=r(t),G=p(t,"P",{});var Mt=A(G);Rt=p(Mt,"STRONG",{"data-svelte-h":!0}),u(Rt)!=="svelte-2rr6sz"&&(Rt.textContent=Is),qe=h(Mt,": "),b(O.$$.fragment,Mt),Mt.forEach(s),Te=r(t),y=p(t,"P",{});var v=A(y);jt=p(v,"STRONG",{"data-svelte-h":!0}),u(jt)!=="svelte-14u708u"&&(jt.textContent=Ts),ze=h(v,": "),b(W.$$.fragment,v),Ke=h(v," from "),b(N.$$.fragment,v),Ue=h(v,", "),b(Y.$$.fragment,v),Ge=h(v,", "),b(Q.$$.fragment,v),Oe=h(v,", "),b(J.$$.fragment,v),We=h(v,"."),v.forEach(s),Le=r(t),Ct=p(t,"P",{"data-svelte-h":!0}),u(Ct)!=="svelte-tvhrus"&&(Ct.innerHTML=Ls),this.h()},h(){x(I,"class","shiki min-dark"),qt(I,"background-color","#1f1f1f"),x(I,"tabindex","0"),x(T,"class","shiki min-dark"),qt(T,"background-color","#1f1f1f"),x(T,"tabindex","0"),x(L,"class","shiki min-dark"),qt(L,"background-color","#1f1f1f"),x(L,"tabindex","0"),x(H,"class","shiki min-dark"),qt(H,"background-color","#1f1f1f"),x(H,"tabindex","0"),x(P,"class","shiki min-dark"),qt(P,"background-color","#1f1f1f"),x(P,"tabindex","0"),x(M,"class","shiki min-dark"),qt(M,"background-color","#1f1f1f"),x(M,"tabindex","0")},m(t,e){n(t,l,e),d(l,a),B(c,l,null),d(l,V),n(t,$,e),n(t,_,e),d(_,At),B(E,_,null),d(_,Pe),n(t,Ut,e),n(t,D,e),d(D,Me),B(S,D,null),d(D,Ae),n(t,Gt,e),n(t,X,e),n(t,Ot,e),n(t,Z,e),n(t,Wt,e),n(t,tt,e),n(t,Nt,e),n(t,et,e),n(t,Yt,e),n(t,st,e),n(t,Qt,e),n(t,R,e),d(R,Ee),B(j,R,null),d(R,De),n(t,Jt,e),n(t,nt,e),n(t,Vt,e),n(t,I,e),n(t,Xt,e),n(t,lt,e),n(t,Zt,e),n(t,T,e),n(t,te,e),n(t,at,e),n(t,ee,e),n(t,L,e),n(t,se,e),n(t,ot,e),n(t,ne,e),n(t,H,e),n(t,le,e),n(t,pt,e),n(t,ae,e),n(t,P,e),n(t,oe,e),n(t,it,e),n(t,pe,e),n(t,Et,e),B(rt,Et,null),n(t,ie,e),n(t,ct,e),n(t,re,e),n(t,ut,e),n(t,ce,e),n(t,mt,e),n(t,ue,e),n(t,ft,e),n(t,me,e),n(t,ht,e),n(t,fe,e),n(t,$t,e),n(t,he,e),n(t,dt,e),n(t,$e,e),n(t,q,e),d(q,Se),B(z,q,null),d(q,Re),n(t,de,e),n(t,M,e),n(t,ye,e),n(t,yt,e),n(t,_e,e),n(t,Dt,e),B(_t,Dt,null),n(t,ve,e),n(t,vt,e),n(t,Fe,e),n(t,Ft,e),n(t,be,e),n(t,bt,e),n(t,Be,e),n(t,Bt,e),n(t,ge,e),n(t,gt,e),n(t,ke,e),n(t,kt,e),n(t,we,e),n(t,wt,e),n(t,xe,e),n(t,xt,e),n(t,Ce,e),n(t,K,e),d(K,St),d(K,je),B(U,K,null),n(t,Ie,e),n(t,G,e),d(G,Rt),d(G,qe),B(O,G,null),n(t,Te,e),n(t,y,e),d(y,jt),d(y,ze),B(W,y,null),d(y,Ke),B(N,y,null),d(y,Ue),B(Y,y,null),d(y,Ge),B(Q,y,null),d(y,Oe),B(J,y,null),d(y,We),n(t,Le,e),n(t,Ct,e),He=!0},p(t,e){const It={};e&2&&(It.$$scope={dirty:e,ctx:t}),c.$set(It);const Tt={};e&2&&(Tt.$$scope={dirty:e,ctx:t}),E.$set(Tt);const Lt={};e&2&&(Lt.$$scope={dirty:e,ctx:t}),S.$set(Lt);const zt={};e&2&&(zt.$$scope={dirty:e,ctx:t}),j.$set(zt);const Ht={};e&2&&(Ht.$$scope={dirty:e,ctx:t}),z.$set(Ht);const Kt={};e&2&&(Kt.$$scope={dirty:e,ctx:t}),U.$set(Kt);const Pt={};e&2&&(Pt.$$scope={dirty:e,ctx:t}),O.$set(Pt);const Mt={};e&2&&(Mt.$$scope={dirty:e,ctx:t}),W.$set(Mt);const v={};e&2&&(v.$$scope={dirty:e,ctx:t}),N.$set(v);const Hs={};e&2&&(Hs.$$scope={dirty:e,ctx:t}),Y.$set(Hs);const Ps={};e&2&&(Ps.$$scope={dirty:e,ctx:t}),Q.$set(Ps);const Ms={};e&2&&(Ms.$$scope={dirty:e,ctx:t}),J.$set(Ms)},i(t){He||(g(c.$$.fragment,t),g(E.$$.fragment,t),g(S.$$.fragment,t),g(j.$$.fragment,t),g(rt.$$.fragment,t),g(z.$$.fragment,t),g(_t.$$.fragment,t),g(U.$$.fragment,t),g(O.$$.fragment,t),g(W.$$.fragment,t),g(N.$$.fragment,t),g(Y.$$.fragment,t),g(Q.$$.fragment,t),g(J.$$.fragment,t),He=!0)},o(t){k(c.$$.fragment,t),k(E.$$.fragment,t),k(S.$$.fragment,t),k(j.$$.fragment,t),k(rt.$$.fragment,t),k(z.$$.fragment,t),k(_t.$$.fragment,t),k(U.$$.fragment,t),k(O.$$.fragment,t),k(W.$$.fragment,t),k(N.$$.fragment,t),k(Y.$$.fragment,t),k(Q.$$.fragment,t),k(J.$$.fragment,t),He=!1},d(t){t&&(s(l),s($),s(_),s(Ut),s(D),s(Gt),s(X),s(Ot),s(Z),s(Wt),s(tt),s(Nt),s(et),s(Yt),s(st),s(Qt),s(R),s(Jt),s(nt),s(Vt),s(I),s(Xt),s(lt),s(Zt),s(T),s(te),s(at),s(ee),s(L),s(se),s(ot),s(ne),s(H),s(le),s(pt),s(ae),s(P),s(oe),s(it),s(pe),s(Et),s(ie),s(ct),s(re),s(ut),s(ce),s(mt),s(ue),s(ft),s(me),s(ht),s(fe),s($t),s(he),s(dt),s($e),s(q),s(de),s(M),s(ye),s(yt),s(_e),s(Dt),s(ve),s(vt),s(Fe),s(Ft),s(be),s(bt),s(Be),s(Bt),s(ge),s(gt),s(ke),s(kt),s(we),s(wt),s(xe),s(xt),s(Ce),s(K),s(Ie),s(G),s(Te),s(y),s(Le),s(Ct)),w(c),w(E),w(S),w(j),w(rt),w(z),w(_t),w(U),w(O),w(W),w(N),w(Y),w(Q),w(J)}}}function sn(m){let l,a;const c=[m[0],Ss];let V={$$slots:{default:[en]},$$scope:{ctx:m}};for(let $=0;$<c.length;$+=1)V=Ne(V,c[$]);return l=new Ks({props:V}),{c(){F(l.$$.fragment)},l($){b(l.$$.fragment,$)},m($,_){B(l,$,_),a=!0},p($,[_]){const At=_&1?zs(c,[_&1&&Es($[0]),_&0&&Es(Ss)]):{};_&2&&(At.$$scope={dirty:_,ctx:$}),l.$set(At)},i($){a||(g(l.$$.fragment,$),a=!0)},o($){k(l.$$.fragment,$),a=!1},d($){w(l,$)}}}const Ss={title:"kbar-svelte-mini - ctrl+k menu for your Svelte website",description:"A super duper lightweight package to easily implement a disposable navigation (ctr+k/cmd+k navigation or menu) system for your Svelte application. To build this package, I set out with three (3) goals in mind.",date:"2024-02-10",lastmod:"2024-02-10",categories:["product launch","sveltekit","npm","kbar"],label:"Product launch",published:!0};function nn(m,l,a){return m.$$set=c=>{a(0,l=Ne(Ne({},l),As(c)))},l=As(l),[l]}class un extends js{constructor(l){super(),qs(this,l,nn,sn,Rs,{})}}export{un as default,Ss as metadata};