@kitn.ai/ui/dist/elements/input.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 x,g as l,h as O,o as S,c as I,A as M,d as V,q as $,t as m,p as h}from"./chunks/define-CNSKFZCd.js";import{I as C}from"./chunks/input-DZD67EvW.js";var F=m("<slot>"),_=m("<style>:host{display:block}");const j=["leading","trailing"];x("kai-input",{type:"text",value:void 0,placeholder:void 0,label:void 0,hint:void 0,error:void 0,size:"md",disabled:void 0,readonly:void 0,required:void 0,invalid:void 0,name:void 0,autocomplete:void 0,inputmode:void 0},(r,y)=>{const{element:t,dispatch:a,flag:n,expose:f}=y,[o,u]=l(r.value??t.getAttribute("value")??""),A=e=>e==null?t.getAttribute("value")??"":String(e),d=e=>{M(o)!==e&&u(e)};Object.defineProperty(t,"value",{get:()=>o(),set:e=>d(A(e)),configurable:!0,enumerable:!0}),O(()=>{const e=o();e?t.getAttribute("value")!==e&&t.setAttribute("value",e):t.hasAttribute("value")&&t.removeAttribute("value")});const[z,q]=l(t.getAttribute("autocapitalize")??void 0),[k,w]=l({leading:!1,trailing:!1});S(()=>{const e=()=>{const p={};for(const b of j)p[b]=!!t.querySelector(`:scope > [slot="${b}"]`);w(p)};e();const i=new MutationObserver(e);i.observe(t,{childList:!0,subtree:!1}),h(()=>i.disconnect());const c=()=>q(t.getAttribute("autocapitalize")??void 0);c();const g=new MutationObserver(c);g.observe(t,{attributes:!0,attributeFilter:["autocapitalize"]}),h(()=>g.disconnect())});const s=e=>k()[e]?(()=>{var i=F();return V(i,"name",e),i._$owner=$(),i})():void 0,v=()=>{var e;return((e=t.shadowRoot)==null?void 0:e.querySelector("input"))??null};return f({focus:e=>{var i;return(i=v())==null?void 0:i.focus(e)},select:()=>{var e;return(e=v())==null?void 0:e.select()},clear:()=>{u(""),a("kai-change",{value:""})}}),[_(),I(C,{get type(){return r.type??"text"},get value(){return o()},get placeholder(){return r.placeholder},get label(){return r.label},get hint(){return r.hint},get error(){return r.error},get size(){return r.size??"md"},get invalid(){return n("invalid")},get disabled(){return n("disabled")},get readonly(){return n("readonly")},get required(){return n("required")},get name(){return r.name},get autocomplete(){return r.autocomplete},get inputmode(){return r.inputmode},get autocapitalize(){return z()},get leading(){return s("leading")},get trailing(){return s("trailing")},onValueInput:e=>{u(e),a("kai-input",{value:e})},onValueChange:e=>{d(e),a("kai-change",{value:e})}})]});