@kitn.ai/ui/dist/elements/search.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{f as C,e as S,g as j,A as g,h as T,c as i,S as u,i as I,n as K,t as v}from"./chunks/define-CNSKFZCd.js";import{I as V}from"./chunks/input-DZD67EvW.js";import{K as $}from"./chunks/kbd-DbyVrlnU.js";import{L as E}from"./chunks/loader-Cg6rO8tQ.js";import{r as m}from"./chunks/icon-CAyRqVrg.js";var L=v('<button type=button part=clear aria-label=Clear class="inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'),N=v("<style>:host{display:block}");C("kai-search",{value:void 0,placeholder:"Search\u2026",icon:"search",debounce:200,loading:!1,shortcut:void 0},(a,d)=>{const{element:t,dispatch:n,flag:b,expose:f}=d,[r,l]=j(a.value??t.getAttribute("value")??""),p=e=>e==null?t.getAttribute("value")??"":String(e);Object.defineProperty(t,"value",{get:()=>r(),set:e=>{const h=p(e);g(r)!==h&&l(h)},configurable:!0,enumerable:!0}),T(()=>{const e=r();e?t.getAttribute("value")!==e&&t.setAttribute("value",e):t.hasAttribute("value")&&t.removeAttribute("value")});let s;const k=()=>{const e=Number(a.debounce??200);return Number.isFinite(e)&&e>=0?e:200},y=e=>{s&&clearTimeout(s),s=setTimeout(()=>n("kai-search",{value:e}),k())},o=()=>{var e;return((e=t.shadowRoot)==null?void 0:e.querySelector("input"))??null},z=e=>{l(e),y(e)},c=()=>{var e;s&&clearTimeout(s),l(""),n("kai-search",{value:""}),(e=o())==null||e.focus()},A=e=>{e.key==="Enter"&&n("kai-submit",{value:g(r)})};f({focus:()=>{var e;return(e=o())==null?void 0:e.focus()},clear:c});const x=i(u,{get when(){return b("loading")},get fallback(){return m(a.icon??"search",{class:"size-4 shrink-0",imgClass:"size-4 shrink-0",spanClass:"inline-flex size-4 shrink-0 items-center justify-center",ariaHidden:!0})},get children(){return i(E,{variant:"circular",size:"sm"})}}),w=[i(u,{get when(){return r()},get children(){var e=L();return e.$$click=c,I(e,()=>m("x",{class:"size-4",imgClass:"size-4"})),e}}),i(u,{get when(){return K(()=>!r())()&&a.shortcut},get children(){return i($,{get keys(){return a.shortcut},size:"sm"})}})];return[N(),i(V,{type:"search",get value(){return r()},get placeholder(){return a.placeholder??"Search\u2026"},leading:x,trailing:w,onValueInput:z,onValueChange:e=>n("kai-change",{value:e}),onKeyDown:A})]}),S(["click"]);