@kitn.ai/ui/dist/elements/dialog.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{x as W,g as $,r as B,h as F,c as x,P as G,u as L,i as w,S as O,d as p,a as I,b as j,t as h,e as J,f as N,o as Q,q as E,n as z,p as U}from"./chunks/define-CNSKFZCd.js";import{c as D}from"./chunks/cn-CU7UAWzk.js";import{c as V}from"./chunks/overlay-B1-MBI6h.js";import{w as X}from"./chunks/disclosure-BcBs--Jf.js";var Y=h('<header part=header class="shrink-0 border-b border-border px-5 py-4 text-base font-semibold text-foreground">'),Z=h('<footer part=footer class="flex shrink-0 items-center justify-end gap-2 border-t border-border px-5 py-3">'),ee=h('<div part=backdrop><div part=panel role=dialog aria-modal=true tabindex=-1><div part=body class="min-h-0 flex-1 overflow-auto px-5 py-4 text-sm text-foreground">');const _=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])','[tabindex]:not([tabindex="-1"])'].join(",");function te(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)&&getComputedStyle(t).visibility!=="hidden"}function oe(t){const a=[],u=f=>{for(const i of Array.from(f.children))if(i instanceof HTMLSlotElement)for(const d of i.assignedElements())d instanceof HTMLElement&&(d.matches(_)&&a.push(d),u(d));else i instanceof HTMLElement&&(i.matches(_)&&a.push(i),u(i))};return u(t),a.filter(te)}function P(){var t;let a=document.activeElement;for(;(t=a?.shadowRoot)!=null&&t.activeElement;)a=a.shadowRoot.activeElement;return a}function ne(t){var a;const u=W(),[f,i]=$(t.defaultOpen??!1),d=`kai-dialog-title-${B()}`,v=()=>t.open!==void 0,m=()=>v()?!!t.open:f(),b=o=>{var n;v()||i(o),(n=t.onOpenChange)==null||n.call(t,o)};(a=t.controllerRef)==null||a.call(t,{open:m,setOpen:b});const c=V(m);let y,l,r=null,k=!1;F(o=>{const n=m();if(n&&!o)r=P(),queueMicrotask(()=>l?.focus());else if(!n&&o){const s=r;r=null,s&&s.isConnected&&queueMicrotask(()=>s.focus())}return n},!1);const A=o=>{if(o.key==="Escape"){o.stopPropagation(),b(!1);return}if(o.key!=="Tab"||!l)return;const n=oe(l);if(!n.length){o.preventDefault(),l.focus();return}const s=P(),e=s?n.indexOf(s):-1;o.shiftKey?e<=0&&(o.preventDefault(),n[n.length-1].focus()):(e===-1||e===n.length-1)&&(o.preventDefault(),n[0].focus())},K=o=>{k&&o.target===y&&b(!1),k=!1};return x(O,{get when(){return c.present()},get children(){return x(G,{get mount(){return u.portalMount()},get children(){var o=ee(),n=o.firstChild,s=n.firstChild;return o.$$keydown=A,o.$$click=K,o.$$pointerdown=e=>{k=e.target===e.currentTarget},L(e=>{y=e,c.setRef(e)},o),L(e=>{var g;l=e,(g=t.panelRef)==null||g.call(t,e)},n),w(n,x(O,{get when(){return t.header},get children(){var e=Y();return p(e,"id",d),w(e,()=>t.header),e}}),s),w(s,()=>t.children),w(n,x(O,{get when(){return t.footer},get children(){var e=Z();return w(e,()=>t.footer),e}}),null),I(e=>{var g=c.state()==="open"?"":void 0,M=c.state()==="closed"?"":void 0,R=D("fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4","animate-in fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0 motion-reduce:animate-none"),C=t.header?d:void 0,q=t.header?void 0:t["aria-label"],S=c.state()==="open"?"":void 0,T=c.state()==="closed"?"":void 0,H=D("flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-xl outline-none","animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 motion-reduce:animate-none",t.class);return g!==e.e&&p(o,"data-expanded",e.e=g),M!==e.t&&p(o,"data-closed",e.t=M),R!==e.a&&j(o,e.a=R),C!==e.o&&p(n,"aria-labelledby",e.o=C),q!==e.i&&p(n,"aria-label",e.i=q),S!==e.n&&p(n,"data-expanded",e.n=S),T!==e.s&&p(n,"data-closed",e.s=T),H!==e.h&&j(n,e.h=H),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0}),o}})}})}J(["pointerdown","click","keydown"]);var re=h("<slot>"),ae=h("<slot name=header>"),ie=h("<slot name=footer>");N("kai-dialog",{open:void 0,defaultOpen:void 0},(t,a)=>{const{flag:u,element:f,expose:i}=a;let d,v;X(a,()=>d,()=>t.open);const[m,b]=$(!1),[c,y]=$(!1),l=()=>{b(!!f.querySelector(':scope > [slot="header"]')),y(!!f.querySelector(':scope > [slot="footer"]'))};return Q(()=>{if(l(),typeof MutationObserver=="function"){const r=new MutationObserver(l);r.observe(f,{childList:!0}),U(()=>r.disconnect())}}),i({focus:r=>v?.focus(r)}),x(ne,{get defaultOpen(){return u("defaultOpen")},get header(){return z(()=>!!m())()?(()=>{var r=ae();return r._$owner=E(),r})():void 0},get footer(){return z(()=>!!c())()?(()=>{var r=ie();return r._$owner=E(),r})():void 0},controllerRef:r=>d=r,panelRef:r=>v=r,get children(){var r=re();return r._$owner=E(),r}})});