@kitn.ai/ui/dist/elements/file-upload.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{c as p,m,s as w,w as x,k as E,i as b,g as L,h as A,p as $,u as F,a as R,d as T,n as D,v as I,t as v,e as P,f as j,q}from"./chunks/define-CNSKFZCd.js";import{I as z}from"./chunks/Icon-C2LTALdM.js";var C=[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["polyline",{points:"17 8 12 3 7 8",key:"t8dd8p"}],["line",{x1:"12",x2:"12",y1:"3",y2:"15",key:"widbto"}]],H=l=>p(z,m(l,{name:"Upload",iconNode:C})),M=H,N=v("<input type=file class=hidden aria-hidden=true>"),U=v("<button type=button>");const h=I();function _(l){const[n]=w(l,["onFilesAdded","children","multiple","accept","disabled"]);let s;const[d,o]=L(!1);let a=0;const f=()=>n.multiple??!0,g=e=>{const t=Array.from(e);f()?n.onFilesAdded(t):n.onFilesAdded(t.slice(0,1))};A(()=>{const e=r=>{r.preventDefault(),r.stopPropagation()},t=r=>{var u;e(r),a++,(u=r.dataTransfer)!=null&&u.items.length&&o(!0)},i=r=>{e(r),a--,a===0&&o(!1)},c=r=>{var u;e(r),o(!1),a=0,(u=r.dataTransfer)!=null&&u.files.length&&g(r.dataTransfer.files)};window.addEventListener("dragenter",t),window.addEventListener("dragleave",i),window.addEventListener("dragover",e),window.addEventListener("drop",c),$(()=>{window.removeEventListener("dragenter",t),window.removeEventListener("dragleave",i),window.removeEventListener("dragover",e),window.removeEventListener("drop",c)})});const y=e=>{var t;const i=e.target;(t=i.files)!=null&&t.length&&(g(i.files),i.value="")},k={isDragging:d,get inputRef(){return s},setInputRef:e=>{s=e},multiple:n.multiple,disabled:n.disabled};return p(h.Provider,{value:k,get children(){return[(()=>{var e=N();return e.$$input=y,F(t=>{s=t},e),R(t=>{var i=f(),c=n.accept,r=n.disabled;return i!==t.e&&(e.multiple=t.e=i),c!==t.t&&T(e,"accept",t.t=c),r!==t.a&&(e.disabled=t.a=r),t},{e:void 0,t:void 0,a:void 0}),e})(),D(()=>n.children)]}})}function O(l){const[n,s]=w(l,["class","children"]),d=x(h),o=()=>{var a;return(a=d?.inputRef)==null?void 0:a.click()};return(()=>{var a=U();return a.$$click=o,E(a,m({get class(){return n.class}},s),!1,!0),b(a,()=>n.children),a})()}P(["input","click"]);var S=v("<slot>");j("kai-file-upload",{multiple:!0,accept:void 0,disabled:!1,label:"Click or drop files to upload"},(l,{dispatch:n,flag:s})=>p(_,{get multiple(){return s("multiple")},get accept(){return l.accept},get disabled(){return s("disabled")},onFilesAdded:d=>n("kai-files-added",{files:d}),get children(){return p(O,{class:"border-border bg-surface hover:bg-muted/60 text-muted-foreground flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed px-6 py-8 text-sm transition-colors",get children(){return[p(M,{class:"size-5"}),(()=>{var d=S();return d._$owner=q(),b(d,()=>l.label),d})()]}})}}));