https://brale.xyz/assets/search-input-nRAlNMlD.js

1import{ot as e,rt as t,t as n}from"./jsx-runtime-vlDczagz.js";import{M as r,Nn as i,W as a,Zt as o,ot as s}from"./layout-1UWg9V41.js";import{t as c}from"./colors-BPAOZcFi.js";var l=e(t(),1),u=n(),d=.2,f=`All`;function p({count:e,active:t=!1}){return(0,u.jsx)(`span`,{className:`relative inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full px-1.5 text-xs font-[550] ${t?`bg-foreground text-background`:`bg-fill-3 text-foreground-muted`}`,children:e})}function m(e,t){function n(){if(typeof window>`u`)return f;let t=window.location.hash.slice(1).toLowerCase();return e.find(e=>e.toLowerCase()===t)||f}let[r,i]=(0,l.useState)(()=>n()),[a,o]=(0,l.useState)(!1);function s(e){i(e),o(!1),e===f?window.history.pushState(null,``,window.location.pathname):window.history.pushState(null,``,`#${e.toLowerCase()}`)}function u(e,t){e.preventDefault(),s(t)}return(0,l.useEffect)(()=>{function t(){let t=window.location.hash.slice(1).toLowerCase(),n=e.find(e=>e.toLowerCase()===t);i(n||f)}return window.addEventListener(`hashchange`,t),()=>window.removeEventListener(`hashchange`,t)},[e]),{activeTab:r,handleClick:u,categoryColors:Object.fromEntries(e.map((e,t)=>[e,c[t%c.length]])),isOpen:a,setIsOpen:o,categoryCounts:Object.fromEntries(e.map(e=>[e,e===f?t?.length??0:t?.filter(t=>t.category===e).length??0]))}}function h({categories:e,onFilterChange:t,items:n,className:o=``}){let{activeTab:c,handleClick:h,categoryColors:g,isOpen:_,setIsOpen:v,categoryCounts:y}=m(e,n);(0,l.useEffect)(()=>{t(c)},[c,t]);let b=(0,l.useRef)(null);return(0,l.useEffect)(()=>{if(!_)return;function e(e){b.current&&(b.current.contains(e.target)||v(!1))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_,v]),(0,u.jsxs)(`div`,{ref:b,className:`relative ${o}`,children:[(0,u.jsxs)(`button`,{type:`button`,"aria-haspopup":`listbox`,"aria-expanded":_,onClick:()=>v(!_),className:`border-border bg-background-muted text-foreground hover:border-border-strong focus-visible:ring-brand-light focus-visible:ring-offset-background inline-flex h-10 w-full items-center gap-2 rounded-xl border px-3 [font-feature-settings:'cv11'_1] text-sm font-[550] tracking-[-0.14px] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 lg:w-auto`,children:[c===f?null:(0,u.jsx)(`span`,{className:`inline-block h-2 w-2 shrink-0 rounded-full ${g[c]}`,"aria-hidden":`true`}),(0,u.jsx)(`span`,{children:c}),(0,u.jsx)(p,{count:y[c]||0}),(0,u.jsx)(a,{icon:s,className:`text-foreground-muted ml-auto h-3 w-3 shrink-0 ${r.navChevronTransition} lg:ml-1 ${_?`rotate-180`:`rotate-0`}`,"aria-hidden":`true`})]}),_?(0,u.jsx)(i.div,{initial:{opacity:0,y:-4},animate:{opacity:1,y:0},transition:{duration:d,ease:`easeOut`},role:`listbox`,"aria-label":`Filter by category`,className:`border-border bg-background-muted absolute top-full left-0 z-20 mt-2 w-full overflow-hidden rounded-xl border shadow-lg lg:right-0 lg:left-auto lg:w-64`,children:e.map(e=>{let t=c===e;return(0,u.jsxs)(`button`,{role:`option`,"aria-selected":t,onClick:t=>h(t,e),className:`hover:bg-fill-2 flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left [font-feature-settings:'cv11'_1] text-sm font-[550] tracking-[-0.14px] transition-colors ${t?`bg-fill-2 text-foreground`:`text-foreground-muted hover:text-foreground`}`,children:[(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[e===f?null:(0,u.jsx)(`span`,{className:`inline-block h-2 w-2 shrink-0 rounded-full ${g[e]}`,"aria-hidden":`true`}),e]}),(0,u.jsx)(p,{count:y[e]||0,active:t})]},e)})}):null]})}function g({value:e,onChange:t,placeholder:n=`Search`,ariaLabel:r=`Search`,className:i=`max-w-md`}){return(0,u.jsxs)(`div`,{className:`relative w-full ${i}`,children:[(0,u.jsx)(a,{icon:o,className:`text-foreground-muted pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2`,"aria-hidden":`true`}),(0,u.jsx)(`input`,{type:`search`,value:e,onChange:e=>t(e.target.value),placeholder:n,"aria-label":r,className:`border-border bg-fill text-foreground placeholder:text-foreground-muted hover:border-border-strong focus:border-border-strong focus-visible:ring-brand-light focus-visible:ring-offset-background h-10 w-full rounded-xl border pr-4 pl-10 [font-feature-settings:'cv11'_1] text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2`})]})}

1export{h as n,g as t};