https://cdnjs.com/islands/typeahead-COvbqlrr.js

1import{l as e,n as t,r as n,t as r}from"./chunks/theme-z3Jnh76u.js";import{i,n as a,r as o,t as s}from"./chunks/hydration-runtime-7OK5mKrL.js";import{a as c,i as l,o as u,t as d}from"./chunks/schemas-DW0xURyX.js";import{t as f}from"./chunks/search-DwafNmcg.js";var p=e(i(),1),m=e(a(),1),h=o(),g=c({name:u(),version:u(),description:u()}),_=async(e,t,n=6)=>{let r=await fetch(`https://api.cdnjs.com/libraries?search=${encodeURIComponent(e)}&fields=name,version,description&limit=${n}`,{signal:t});if(!r.ok)throw Error(`Failed to fetch status: ${r.status} ${r.statusText}`,{cause:await r.text()});let i=await r.json();return c({results:d(g),available:l()}).parse(i)},v={container:t`
2        position: relative;
3    `,popover:t`
4        position: absolute;
5        background: ${r.background.elevated};
6        border-radius: ${r.radius};
7        box-shadow: 0 0 ${r.spacing(2)} ${r.background.elevated};
8        outline: ${r.spacing(.125)} solid ${r.background.primary};
9        padding: ${r.spacing(1,0)};
10        margin: ${r.spacing(1,0,0)};
11        overflow: hidden;
12        z-index: 1;
13    `,bar:t`
14        display: flex;
15        justify-content: space-between;
16        align-items: center;
17        padding: ${r.spacing(1,2)};
18
19        p,
20        a {
21            font-size: ${r.font.tiny.size};
22            font-weight: ${r.font.tiny.weight};
23            line-height: 1;
24        }
25
26        p {
27            color: rgb(from ${r.text.secondary} r g b / 0.75);
28            font-family: ${r.font.families.mono};
29            text-transform: uppercase;
30            margin: 0;
31        }
32
33        a {
34            color: ${r.text.brand};
35            text-decoration: none;
36
37            &:hover,
38            &:focus {
39                text-decoration: underline;
40            }
41        }
42    `,results:t`
43        list-style: none;
44        margin: 0;
45        padding: 0;
46    `,result:t`
47        padding: ${r.spacing(0,1)};
48
49        a {
50            background: transparent;
51            border-radius: ${r.radius};
52            display: flex;
53            flex-direction: column;
54            gap: ${r.spacing(.5)};
55            text-decoration: none;
56            padding: ${r.spacing(1)};
57            transition: background ${r.transition};
58
59            &:hover,
60            &:focus {
61                background: rgb(from ${r.background.brand} r g b / 0.1);
62
63                p {
64                    strong {
65                        color: ${r.text.brand};
66                    }
67                }
68            }
69
70            p {
71                color: ${r.text.secondary};
72                font-size: ${r.font.small.size};
73                font-weight: ${r.font.small.weight};
74                margin: 0;
75
76                strong {
77                    color: ${r.text.primary};
78                    font-size: ${r.font.body.size};
79                    font-weight: ${r.font.body.weight};
80                    transition: color ${r.transition};
81                }
82
83                small {
84                    color: rgb(from ${r.text.secondary} r g b / 0.75);
85                    font-family: ${r.font.families.mono};
86                    font-size: ${r.font.tiny.size};
87                    font-weight: ${r.font.tiny.weight};
88                }
89            }
90        }
91    `,empty:t`
92        color: rgb(from ${r.text.secondary} r g b / 0.75);
93        margin: ${r.spacing(1,0,1.5)};
94        text-align: center;
95
96        &,
97        strong {
98            font-size: ${r.font.small.size};
99            font-weight: ${r.font.small.weight};
100        }
101
102        strong {
103            color: ${r.text.primary};
104        }
105    `};s(`typeahead`,({className:e})=>{let[t,r]=(0,p.useState)(`idle`),[i,a]=(0,p.useState)([]),[o,s]=(0,p.useState)(`0`),[c,l]=(0,p.useState)(``),[u,d]=(0,p.useState)(``),[g,y]=(0,p.useState)(!1),b=(0,p.useRef)(null),x=(0,p.useRef)(!1),S=(0,p.useCallback)(async e=>{let t=new AbortController;b.current?.abort(),b.current=t;try{r(`loading`);let{results:n,available:i}=await _(e,t.signal);a(n),s(i.toLocaleString()),l(e),r(`idle`)}catch(e){t.signal.aborted||(console.error(e),r(`failed`))}},[]);(0,p.useEffect)(()=>

105{if(!x.current){x.current=!0;return}let e=setTimeout(()=>S(u),300);return()=>clearTimeout(e)},[S,u]);let C=(0,p.useRef)(null),w=(0,p.useRef)(null),T=(0,p.useCallback)(()=>{if(!C.current||!w.current)return;let{bottom:e,left:t,width:n}=C.current.getBoundingClientRect();w.current.style.top=`${e+window.scrollY}px`,w.current.style.left=`${t+window.scrollX}px`,w.current.style.width=`${n}px`},[]);return(0,p.useEffect)(()=>{if(g)return window.addEventListener(`resize`,T),()=>window.removeEventListener(`resize`,T)},[g,T]),(0,h.jsxs)(`div`,{ref:C,className:n(v.container,e),children:[(0,h.jsx)(f,{value:u,onChange:d,onFocus:()=>{y(!0),S(u),T()},onBlur:()=>y(!1),onSubmit:()=>{window.location.href=u.length?`/libraries?search=${encodeURIComponent(u)}`:`/libraries`},state:t,elevated:!0}),g&&(0,m.createPortal)((0,h.jsxs)(`div`,{ref:e=>{w.current=e,e&&T()},onMouseDown:e=>e.preventDefault(),className:v.popover,children:[(0,h.jsxs)(`div`,{className:v.bar,children:[(0,h.jsxs)(`p`,{children:[t===`loading`&&`Searching...`,t===`failed`&&`Failed to fetch results`,t===`idle`&&c===``&&`Popular libraries`,t===`idle`&&c!==``&&`${o} results`]}),t===`idle`&&i.length>0&&(0,h.jsx)(`a`,{href:c.length?`/libraries?search=${encodeURIComponent(c)}`:`/libraries`,children:`View all`})]}),t===`idle`&&i.length===0&&(0,h.jsxs)(`p`,{className:v.empty,children:[`No results found for "`,(0,h.jsx)(`strong`,{children:c}),`"`]}),t===`idle`&&i.length>0&&(0,h.jsx)(`ul`,{className:v.results,children:i.map(({name:e,version:t,description:n})=>(0,h.jsx)(`li`,{className:v.result,children:(0,h.jsxs)(`a`,{href:`/libraries/${encodeURIComponent(e)}`,children:[(0,h.jsxs)(`p`,{children:[(0,h.jsx)(`strong`,{children:e}),(0,h.jsxs)(`small`,{children:[` @ `,t]})]}),(0,h.jsx)(`p`,{children:n})]})},e))})]}),document.body)]})});
106//# sourceMappingURL=typeahead-COvbqlrr.js.map