@kitn.ai/ui/dist/elements/nav.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{s as q,g as E,k as D,m as G,i as l,c as s,t as v,S as m,a as y,b as x,n as j,d as I,G as L,F,e as H,f as J}from"./chunks/define-CNSKFZCd.js";import{c as f}from"./chunks/cn-CU7UAWzk.js";import{r as C}from"./chunks/icon-CAyRqVrg.js";import{B as K}from"./chunks/badge-BTNZTODL.js";import{c as M}from"./chunks/chevron-right-ChzBcNJ-.js";var N=v("<nav>"),O=v("<span part=chevron aria-hidden=true>"),P=v("<span>"),Q=v('<span class="text-xs text-muted-foreground">'),T=v('<span part=status class="flex shrink-0 items-center gap-1.5"aria-hidden=true><span class="relative inline-flex"><span>'),U=v('<span part=meta class="shrink-0 text-xs tabular-nums text-muted-foreground"aria-hidden=true>'),W=v("<button part=item-action data-nav-action=action type=button>"),X=v("<button part=item-action data-nav-action=close type=button>"),Y=v('<div><button part=item type=button><span class="min-w-0 flex-1 truncate">'),Z=v("<div part=group role=group>"),_=v('<span class="size-4 shrink-0"aria-hidden=true>');const R={primary:"bg-primary",info:"bg-tool-blue",success:"bg-tool-green",warning:"bg-tool-amber",error:"bg-tool-red",neutral:"bg-muted-foreground"};function ee(r){const[d,e]=q(r,["items","value","onItemSelect","onItemAction","onItemClose","defaultCollapsed","class"]),[c,p]=E(new Set(d.defaultCollapsed??[]),{equals:!1}),h=a=>!c().has(a),b=a=>p(w=>{const k=new Set(w);return k.has(a)?k.delete(a):k.add(a),k});return(()=>{var a=N();return D(a,G(e,{get class(){return f("flex flex-col gap-0.5",d.class)}}),!1,!0),l(a,s(B,{get items(){return d.items??[]},depth:0,get value(){return d.value},get onItemSelect(){return d.onItemSelect},get onItemAction(){return d.onItemAction},get onItemClose(){return d.onItemClose},isExpanded:h,toggle:b})),a})()}function B(r){const d=()=>r.items.some(e=>{var c;return(((c=e.children)==null?void 0:c.length)??0)>0});return s(F,{get each(){return r.items},children:e=>{const c=()=>{var n;return(((n=e.children)==null?void 0:n.length)??0)>0},p=()=>r.isExpanded(e.id),h=()=>r.value===e.id,b=()=>{var n;return((n=e.status)==null?void 0:n.tone)??"neutral"},a=()=>{var n,o;if(!(!((n=e.status)!=null&&n.label)&&!e.meta))return[e.label,(o=e.status)==null?void 0:o.label,e.meta].filter(Boolean).join(", ")},w=()=>{var n;e.disabled||(c()?r.toggle(e.id):(n=r.onItemSelect)==null||n.call(r,e.id))},k=n=>{!c()||e.disabled||(n.key==="ArrowRight"&&!p()||n.key==="ArrowLeft"&&p())&&(n.preventDefault(),r.toggle(e.id))};return[(()=>{var n=Y(),o=n.firstChild,S=o.firstChild;return o.$$keydown=k,o.$$click=w,l(o,s(m,{get when(){return c()},get fallback(){return j(()=>!!d())()?_():null},get children(){var t=O();return l(t,s(M,{size:16})),y(()=>x(t,f("flex shrink-0 items-center opacity-60 transition-transform",p()&&"rotate-90"))),t}}),S),l(o,s(m,{get when(){return e.icon},get children(){return C(e.icon,{class:"size-4 shrink-0"})}}),S),l(S,()=>e.label),l(o,s(m,{get when(){return e.status},get children(){var t=T(),i=t.firstChild,g=i.firstChild;return l(i,s(m,{get when(){return e.status.pulse},get children(){var u=P();return y(()=>x(u,f("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden",R[b()]))),u}}),g),l(t,s(m,{get when(){return e.status.label},get children(){var u=Q();return l(u,()=>e.status.label),u}}),null),y(()=>x(g,f("relative inline-block size-2 rounded-full",R[b()]))),t}}),null),l(o,s(m,{get when(){return e.meta},get children(){var t=U();return l(t,()=>e.meta),t}}),null),l(o,s(m,{get when(){return e.badge},get children(){return s(K,{variant:"default",class:"px-1.5 py-0 text-[0.625rem] font-medium uppercase tracking-wide",get children(){return e.badge}})}}),null),l(o,s(m,{get when(){return e.trailing},get children(){return C(e.trailing,{class:"size-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-60"})}}),null),l(n,s(m,{get when(){return e.action},get children(){var t=W();return t.$$click=()=>{var i;return(i=r.onItemAction)==null?void 0:i.call(r,e.id,e.action)},l(t,()=>C(e.action.icon,{class:"size-4"})),y(i=>{var g=e.action.label,u=f("mr-1 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground","opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground","focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","group-hover:opacity-100");return g!==i.e&&I(t,"aria-label",i.e=g),u!==i.t&&x(t,i.t=u),i},{e:void 0,t:void 0}),t}}),null),l(n,s(m,{get when(){return e.closable},get children(){var t=X();return t.$$click=()=>{var i;return(i=r.onItemClose)==null?void 0:i.call(r,e.id)},l(t,()=>C("x",{class:"size-4"})),y(i=>{var g=e.label?`Remove ${e.label}`:"Remove",u=f("mr-1 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground","opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground","focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","group-hover:opacity-100");return g!==i.e&&I(t,"aria-label",i.e=g),u!==i.t&&x(t,i.t=u),i},{e:void 0,t:void 0}),t}}),null),y(t=>{var i=f("group relative flex items-center rounded-md transition-colors","hover:bg-accent",h()&&"bg-accent",e.disabled&&"pointer-events-none opacity-50"),g=e.disabled,u=h()?"page":void 0,$=c()?p():void 0,z=a(),V=r.depth>0?{"padding-left":`${10+r.depth*16}px`}:void 0,A=f("flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors","text-muted-foreground group-hover:text-foreground","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none",h()&&"font-medium text-foreground");return i!==t.e&&x(n,t.e=i),g!==t.t&&(o.disabled=t.t=g),u!==t.a&&I(o,"aria-current",t.a=u),$!==t.o&&I(o,"aria-expanded",t.o=$),z!==t.i&&I(o,"aria-label",t.i=z),t.n=L(o,V,t.n),A!==t.s&&x(o,t.s=A),t},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0}),n})(),s(m,{get when(){return j(()=>!!c())()&&p()},get children(){var n=Z();return l(n,s(B,{get items(){return e.children},get depth(){return r.depth+1},get value(){return r.value},get onItemSelect(){return r.onItemSelect},get onItemAction(){return r.onItemAction},get onItemClose(){return r.onItemClose},get isExpanded(){return r.isExpanded},get toggle(){return r.toggle}})),n}})]}})}H(["click","keydown"]),J("kai-nav",{items:void 0,value:void 0,defaultValue:void 0,defaultCollapsed:void 0},(r,{dispatch:d,expose:e})=>{const[c,p]=E(r.defaultValue),h=()=>r.value??c(),b=a=>{p(a),d("kai-nav-select",{id:a})};return e({select:a=>b(a)}),s(ee,{get items(){return r.items},get value(){return h()},get defaultCollapsed(){return r.defaultCollapsed},onItemSelect:b,onItemAction:(a,w)=>d("kai-nav-item-action",{value:a,action:w}),onItemClose:a=>d("kai-nav-item-close",{value:a}),part:"nav"})});