@kitn.ai/ui/dist/elements/tabs.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 V,u as C,k as j,m as q,i as h,c as D,a as z,d as x,b as H,F as I,t as E,e as L,f as R,g as S}from"./chunks/define-CNSKFZCd.js";import{r as B}from"./chunks/icon-CAyRqVrg.js";import{c as k}from"./chunks/cn-CU7UAWzk.js";var F=E("<div>"),K=E("<button type=button part=tab role=tab>");const N={segmented:"inline-flex items-center gap-1 rounded-lg bg-muted p-1",underline:"inline-flex items-center gap-1 border-b border-border"};function P(l,a){const s="inline-flex items-center gap-1.5 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";return l==="underline"?k(s,"border-b-2 px-3 py-2 -mb-px",a?"border-primary text-foreground":"border-transparent text-muted-foreground hover:text-foreground"):k(s,"rounded-md px-3 py-1.5",a?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground")}function T(l){const[a,s]=V(l,["items","value","variant","block","disabled","onChange","ref","class"]),b=()=>a.items??[],v=()=>a.variant??"segmented",f={},u=()=>b().filter(t=>!t.disabled),o=()=>a.value,c=()=>{var t;return o()!==void 0&&u().some(r=>r.id===o())?o():(t=u()[0])==null?void 0:t.id},n=t=>{var r;a.disabled||t.disabled||t.id!==a.value&&((r=a.onChange)==null||r.call(a,t.id))},g=t=>{const r=f[t];r&&r.focus()},m=(t,r)=>{const i=u();if(i.length===0)return;const d=i.findIndex(p=>p.id===r.id);let e;switch(t.key){case"ArrowRight":case"ArrowDown":e=i[(d+1)%i.length];break;case"ArrowLeft":case"ArrowUp":e=i[(d-1+i.length)%i.length];break;case"Home":e=i[0];break;case"End":e=i[i.length-1];break;case"Enter":case" ":t.preventDefault(),n(r);return;default:return}e&&(t.preventDefault(),n(e),g(e.id))};return(()=>{var t=F();return C(r=>{var i;return(i=a.ref)==null?void 0:i.call(a,r)},t),j(t,q(s,{role:"tablist",part:"tablist",get"aria-disabled"(){return a.disabled?"true":void 0},get class(){return k(N[v()],a.block&&"flex w-full",a.class)}}),!1,!0),h(t,D(I,{get each(){return b()},children:r=>{const i=()=>r.id===o();return(()=>{var d=K();return d.$$keydown=e=>m(e,r),d.$$click=()=>n(r),C(e=>{f[r.id]=e},d),h(d,()=>B(r.icon,{class:"size-4 shrink-0"}),null),h(d,()=>r.label,null),z(e=>{var p=i()?"":void 0,w=i()?"true":"false",y=r.id===c()?0:-1,A=a.disabled||r.disabled,$=k(P(v(),i()),a.block&&"flex-1 justify-center");return p!==e.e&&x(d,"data-active",e.e=p),w!==e.t&&x(d,"aria-selected",e.t=w),y!==e.a&&x(d,"tabindex",e.a=y),A!==e.o&&(d.disabled=e.o=A),$!==e.i&&H(d,e.i=$),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),d})()}})),t})()}L(["click","keydown"]),R("kai-tabs",{items:void 0,value:void 0,defaultValue:void 0,variant:"segmented",block:void 0,disabled:void 0},(l,{dispatch:a,flag:s,expose:b})=>{const[v,f]=S(l.defaultValue),u=()=>l.value??v(),o=n=>{f(n),a("kai-tab-change",{value:n})};let c;return b({select:n=>{var g;const m=(g=l.items)==null?void 0:g.find(t=>t.id===n);!m||m.disabled||s("disabled")||o(n)},focus:()=>{var n;(n=c?.querySelector('[role="tab"][tabindex="0"]:not([disabled])'))==null||n.focus()}}),D(T,{get items(){return l.items},get value(){return u()},get variant(){return l.variant??"segmented"},get block(){return s("block")},get disabled(){return s("disabled")},onChange:o,ref:n=>c=n})});