UNPKG

@kitn.ai/ui

Version:

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

2 lines (1 loc) 11.5 kB
import{s as J,c as k,m as Q,n as X,x as L,P as F,u as z,i as x,a as D,d as b,z as C,b as E,S as q,g as w,r as A,w as P,t as M,v as R,p as V,e as Y}from"./define-CNSKFZCd.js";import{c as I}from"./cn-CU7UAWzk.js";import{A as Z,c as W,u as j,a as _}from"./overlay-B1-MBI6h.js";import{c as ee}from"./chevron-right-ChzBcNJ-.js";import{c as U}from"./check-fhmRksq_.js";var H=M("<div role=menu tabindex=-1 style=position:fixed>"),te=M("<div role=menuitem tabindex=-1>"),re=M("<div role=separator>"),ne=M("<div>"),oe=M('<div role=menuitemcheckbox tabindex=-1><span class="ml-auto flex size-4 shrink-0 items-center justify-center text-muted-foreground">'),ie=M('<div role=menuitemradio tabindex=-1><span class="ml-auto flex size-4 shrink-0 items-center justify-center text-muted-foreground">'),ae=M("<div role=menuitem tabindex=-1 aria-haspopup=menu>");const N=R(),T=()=>{const r=P(N);if(!r)throw new Error("Dropdown parts must be used within <Dropdown>");return r},S='[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])';function se(r){var t;const[s,o]=w(r.defaultOpen??!1),[n,d]=w(!1),[l,v]=w(),[y,h]=w(),[a,e]=w([]),i=u=>(e(c=>[...c,u]),()=>e(c=>c.filter(f=>f!==u))),m=(u,c)=>{var f,p;if(!(u&&r.disabled)){if(d(!!(c!=null&&c.viaKeyboard)),o(u),u)c!=null&&c.viaKeyboard&&(queueMicrotask(()=>{var g,$;return($=(g=y())==null?void 0:g.querySelector(S))==null?void 0:$.focus()}),(p=(f=y())==null?void 0:f.querySelector(S))==null||p.focus());else if(c?.returnFocus!==!1){const g=l();g?.focus(),queueMicrotask(()=>g?.focus())}}};return(t=r.controllerRef)==null||t.call(r,{open:s,setOpen:u=>m(u)}),k(N.Provider,{get value(){return{open:s,setOpen:m,triggerId:A(),menuId:A(),setTrigger:v,setMenu:h,trigger:l,menu:y,openedViaKeyboard:n,registerSubMenu:i,subMenus:a}},get children(){return r.children}})}function de(r){const t=T(),[,s]=J(r,["as","children","class"]);return k(Z,Q({get as(){return r.as??"button"}},s,{ref(o){var n=t.setTrigger;typeof n=="function"?n(o):t.setTrigger=o},get id(){return t.triggerId},"aria-haspopup":"menu",get"aria-expanded"(){return t.open()},get"aria-controls"(){return X(()=>!!t.open())()?t.menuId:void 0},onClick:()=>t.setOpen(!t.open()),onKeyDown:o=>{(o.key==="ArrowDown"||o.key==="ArrowUp"||o.key==="Enter"||o.key===" ")&&(o.preventDefault(),t.setOpen(!0,{viaKeyboard:!0}))},get class(){return r.class}},()=>r.as?{}:{type:"button"},{get children(){return r.children}}))}function ue(r){const t=T(),s=L(),o=W(t.open),n=j(t.trigger,t.menu,{placement:"bottom-start",gutter:6,onDisconnect:()=>t.setOpen(!1,{returnFocus:!1})});_({enabled:t.open,onDismiss:a=>t.setOpen(!1,{returnFocus:a==="escape"}),refs:()=>[t.trigger(),t.menu(),...t.subMenus()]});const d=()=>{var a;return Array.from(((a=t.menu())==null?void 0:a.querySelectorAll(S))??[])},l=a=>{const e=d();if(!e.length)return;const i=(a%e.length+e.length)%e.length;e[i].focus()},v=()=>{var a;const e=(a=t.menu())==null?void 0:a.getRootNode();return e?.activeElement??document.activeElement},y=()=>d().findIndex(a=>a===v()),h=a=>{const e=d();switch(a.key){case"ArrowDown":a.preventDefault(),l(y()+1);break;case"ArrowUp":a.preventDefault(),l(y()-1);break;case"Home":a.preventDefault(),l(0);break;case"End":a.preventDefault(),l(e.length-1);break;case"Tab":t.setOpen(!1,{returnFocus:!1});break;default:if(a.key.length===1&&/\S/.test(a.key)){const i=y()+1,m=a.key.toLowerCase(),u=e.findIndex((f,p)=>p>=i&&(f.textContent??"").trim().toLowerCase().startsWith(m)),c=u>=0?u:e.findIndex(f=>(f.textContent??"").trim().toLowerCase().startsWith(m));c>=0&&(a.preventDefault(),l(c))}}};return k(q,{get when(){return o.present()},get children(){return k(F,{get mount(){return s.portalMount()},get children(){var a=H();return a.$$keydown=h,z(e=>{t.setMenu(e),o.setRef(e),t.openedViaKeyboard()&&queueMicrotask(()=>{var i;return(i=e.querySelector(S))==null?void 0:i.focus()})},a),x(a,()=>r.children),D(e=>{var i=t.menuId,m=t.triggerId,u=o.state()==="open"?"":void 0,c=o.state()==="closed"?"":void 0,f=`${n.pos().x}px`,p=`${n.pos().y}px`,g=n.hidden()?"hidden":"visible",$=n.hidden()?"none":void 0,O=I("z-50 min-w-[8rem] rounded-lg bg-card p-1 kai-elevation","animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",r.class);return i!==e.e&&b(a,"id",e.e=i),m!==e.t&&b(a,"aria-labelledby",e.t=m),u!==e.a&&b(a,"data-expanded",e.a=u),c!==e.o&&b(a,"data-closed",e.o=c),f!==e.i&&C(a,"left",e.i=f),p!==e.n&&C(a,"top",e.n=p),g!==e.s&&C(a,"visibility",e.s=g),$!==e.h&&C(a,"pointer-events",e.h=$),O!==e.r&&E(a,e.r=O),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,r:void 0}),a}})}})}function le(r){const t=T(),s=()=>{var o;r.disabled||((o=r.onSelect)==null||o.call(r),t.setOpen(!1))};return(()=>{var o=te();return o.$$pointermove=n=>{r.disabled||n.currentTarget.focus()},o.$$keydown=n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),s())},o.$$click=s,x(o,()=>r.children),D(n=>{var d=r.disabled?"true":void 0,l=I("flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors","hover:bg-muted focus:bg-muted",r.disabled&&"opacity-50 pointer-events-none",r.class);return d!==n.e&&b(o,"aria-disabled",n.e=d),l!==n.t&&E(o,n.t=l),n},{e:void 0,t:void 0}),o})()}function ce(r){return(()=>{var t=re();return D(()=>E(t,I("-mx-1 my-1 h-px bg-border",r.class))),t})()}function ve(r){return(()=>{var t=ne();return x(t,()=>r.children),D(()=>E(t,I("select-none px-2 py-1.5 text-xs font-medium text-muted-foreground",r.class))),t})()}function pe(r){const t=()=>{var s;r.disabled||(s=r.onSelect)==null||s.call(r)};return(()=>{var s=oe(),o=s.firstChild;return s.$$pointermove=n=>{r.disabled||n.currentTarget.focus()},s.$$keydown=n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),t())},s.$$click=t,x(s,()=>r.children,o),x(o,k(q,{get when(){return r.checked},get children(){return k(U,{class:"size-4","aria-hidden":"true"})}})),D(n=>{var d=r.checked?"true":"false",l=r.disabled?"true":void 0,v=I("flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors","hover:bg-muted focus:bg-muted",r.disabled&&"opacity-50 pointer-events-none",r.class);return d!==n.e&&b(s,"aria-checked",n.e=d),l!==n.t&&b(s,"aria-disabled",n.t=l),v!==n.a&&E(s,n.a=v),n},{e:void 0,t:void 0,a:void 0}),s})()}function me(r){const t=()=>{var s;r.disabled||(s=r.onSelect)==null||s.call(r)};return(()=>{var s=ie(),o=s.firstChild;return s.$$pointermove=n=>{r.disabled||n.currentTarget.focus()},s.$$keydown=n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),t())},s.$$click=t,x(s,()=>r.children,o),x(o,k(q,{get when(){return r.checked},get children(){return k(U,{class:"size-4","aria-hidden":"true"})}})),D(n=>{var d=r.checked?"true":"false",l=r.disabled?"true":void 0,v=I("flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors","hover:bg-muted focus:bg-muted",r.disabled&&"opacity-50 pointer-events-none",r.class);return d!==n.e&&b(s,"aria-checked",n.e=d),l!==n.t&&b(s,"aria-disabled",n.t=l),v!==n.a&&E(s,n.a=v),n},{e:void 0,t:void 0,a:void 0}),s})()}const B=R(),G=()=>{const r=P(B);if(!r)throw new Error("DropdownSub parts must be used within <DropdownSub>");return r};function fe(r){const[t,s]=w(!1),[o,n]=w(!1),[d,l]=w(),[v,y]=w();let h;const a=()=>{h&&(clearTimeout(h),h=void 0)},e=(m,u)=>{var c,f;if(a(),n(!!(u!=null&&u.viaKeyboard)),s(m),m)u!=null&&u.viaKeyboard&&(queueMicrotask(()=>{var p,g;return(g=(p=v())==null?void 0:p.querySelector(S))==null?void 0:g.focus()}),(f=(c=v())==null?void 0:c.querySelector(S))==null||f.focus());else if(u?.returnFocus!==!1){const p=d();p?.focus(),queueMicrotask(()=>p?.focus())}},i=()=>{a(),h=setTimeout(()=>e(!1),120)};return V(a),k(B.Provider,{get value(){return{open:t,setOpen:e,triggerId:A(),menuId:A(),setTrigger:l,setMenu:y,trigger:d,menu:v,openedViaKeyboard:o,cancelClose:a,scheduleClose:i}},get children(){return r.children}})}function ge(r){const t=G(),s=o=>{(o.key==="ArrowRight"||o.key==="Enter"||o.key===" ")&&(o.preventDefault(),o.stopPropagation(),t.setOpen(!0,{viaKeyboard:!0}))};return(()=>{var o=ae();o.$$pointermove=d=>d.currentTarget.focus(),o.addEventListener("pointerleave",()=>t.scheduleClose()),o.addEventListener("pointerenter",()=>{t.cancelClose(),t.setOpen(!0)}),o.$$keydown=s,o.$$click=()=>t.setOpen(!t.open());var n=t.setTrigger;return typeof n=="function"?z(n,o):t.setTrigger=o,x(o,()=>r.children,null),x(o,k(ee,{class:"ml-auto size-4 shrink-0 text-muted-foreground","aria-hidden":"true"}),null),D(d=>{var l=t.triggerId,v=t.open(),y=t.open()?t.menuId:void 0,h=I("flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors","hover:bg-muted focus:bg-muted data-[expanded]:bg-muted",r.class),a=t.open()?"":void 0;return l!==d.e&&b(o,"id",d.e=l),v!==d.t&&b(o,"aria-expanded",d.t=v),y!==d.a&&b(o,"aria-controls",d.a=y),h!==d.o&&E(o,d.o=h),a!==d.i&&b(o,"data-expanded",d.i=a),d},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),o})()}function be(r){const t=G(),s=T(),o=L(),n=W(t.open),d=j(t.trigger,t.menu,{placement:"right-start",gutter:2,onDisconnect:()=>t.setOpen(!1,{returnFocus:!1})}),l=()=>{var e;return Array.from(((e=t.menu())==null?void 0:e.querySelectorAll(S))??[])},v=e=>{const i=l();if(!i.length)return;const m=(e%i.length+i.length)%i.length;i[m].focus()},y=()=>{var e;const i=(e=t.menu())==null?void 0:e.getRootNode();return i?.activeElement??document.activeElement},h=()=>l().findIndex(e=>e===y()),a=e=>{const i=l();switch(e.key){case"ArrowDown":e.preventDefault(),v(h()+1);break;case"ArrowUp":e.preventDefault(),v(h()-1);break;case"Home":e.preventDefault(),v(0);break;case"End":e.preventDefault(),v(i.length-1);break;case"ArrowLeft":e.preventDefault(),e.stopPropagation(),t.setOpen(!1,{returnFocus:!0});break;case"Escape":e.preventDefault(),e.stopPropagation(),t.setOpen(!1,{returnFocus:!0});break;default:if(e.key.length===1&&/\S/.test(e.key)){const m=h()+1,u=e.key.toLowerCase(),c=i.findIndex((p,g)=>g>=m&&(p.textContent??"").trim().toLowerCase().startsWith(u)),f=c>=0?c:i.findIndex(p=>(p.textContent??"").trim().toLowerCase().startsWith(u));f>=0&&(e.preventDefault(),v(f))}}};return k(q,{get when(){return n.present()},get children(){return k(F,{get mount(){return o.portalMount()},get children(){var e=H();return e.addEventListener("pointerleave",()=>t.scheduleClose()),e.addEventListener("pointerenter",()=>t.cancelClose()),e.$$keydown=a,z(i=>{t.setMenu(i),n.setRef(i);const m=s.registerSubMenu(i);V(m),t.openedViaKeyboard()&&queueMicrotask(()=>{var u;return(u=i.querySelector(S))==null?void 0:u.focus()})},e),x(e,()=>r.children),D(i=>{var m=t.menuId,u=t.triggerId,c=n.state()==="open"?"":void 0,f=n.state()==="closed"?"":void 0,p=`${d.pos().x}px`,g=`${d.pos().y}px`,$=d.hidden()?"hidden":"visible",O=d.hidden()?"none":void 0,K=I("z-50 min-w-[8rem] rounded-lg bg-card p-1 kai-elevation","animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",r.class);return m!==i.e&&b(e,"id",i.e=m),u!==i.t&&b(e,"aria-labelledby",i.t=u),c!==i.a&&b(e,"data-expanded",i.a=c),f!==i.o&&b(e,"data-closed",i.o=f),p!==i.i&&C(e,"left",i.i=p),g!==i.n&&C(e,"top",i.n=g),$!==i.s&&C(e,"visibility",i.s=$),O!==i.h&&C(e,"pointer-events",i.h=O),K!==i.r&&E(e,i.r=K),i},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0}),e}})}})}Y(["keydown","click","pointermove"]);export{de as D,ue as a,le as b,se as c,ce as d,ve as e,fe as f,ge as g,be as h,me as i,pe as j};