@kitn.ai/ui/dist/elements/segmented.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{m as C,i as g,c as m,u as D,S as $,a as x,d as y,b as A,F as j,t as f,e as H,f as M,g as S,A as w,h as E}from"./chunks/define-CNSKFZCd.js";import{c as z}from"./chunks/cn-CU7UAWzk.js";import{r as F}from"./chunks/icon-CAyRqVrg.js";var I=f("<div role=group part=track>"),L=f('<span class="inline-flex shrink-0 items-center"aria-hidden=true>'),P=f("<button type=button part=segment><span>");const R={sm:"h-7 px-2 text-xs",md:"h-8 px-3 text-sm"};function K(u){const r=C({size:"md"},u),i=[],c=()=>r.options.findIndex(t=>t.value===r.value),s=t=>{var n;const o=r.options[t];o&&(r.onChange(o.value),(n=i[t])==null||n.focus())},d=t=>{const n=r.options.length;if(n===0)return;const o=c();t.key==="ArrowRight"||t.key==="ArrowDown"?(t.preventDefault(),s((Math.max(o,0)+1)%n)):t.key==="ArrowLeft"||t.key==="ArrowUp"?(t.preventDefault(),s((Math.max(o,0)-1+n)%n)):t.key==="Home"?(t.preventDefault(),s(0)):t.key==="End"&&(t.preventDefault(),s(n-1))};return(()=>{var t=I();return t.$$keydown=d,g(t,m(j,{get each(){return r.options},children:(n,o)=>{const e=()=>n.value===r.value,v=()=>e()||c()===-1&&o()===0;return(()=>{var l=P(),p=l.firstChild;return l.$$click=()=>r.onChange(n.value),D(a=>{i[o()]=a},l),g(l,m($,{get when(){return n.icon},get children(){var a=L();return g(a,()=>n.icon),a}}),p),g(p,()=>n.label),x(a=>{var h=e(),b=v()?0:-1,k=z("inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",R[r.size],e()?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground");return h!==a.e&&y(l,"aria-pressed",a.e=h),b!==a.t&&y(l,"tabindex",a.t=b),k!==a.a&&A(l,a.a=k),a},{e:void 0,t:void 0,a:void 0}),l})()}})),x(()=>A(t,z("inline-flex items-center gap-0.5 rounded-lg bg-surface-sunken p-0.5",r.class))),t})()}H(["keydown","click"]);var O=f("<style>:host{display:inline-flex}");M("kai-segmented",{options:[],value:void 0,size:"md"},(u,r)=>{const{element:i,dispatch:c}=r,[s,d]=S(u.value??i.getAttribute("value")??""),t=e=>e==null?i.getAttribute("value")??"":String(e),n=e=>{w(s)!==e&&(d(e),c("kai-change",{value:e}))};Object.defineProperty(i,"value",{get:()=>s(),set:e=>{const v=t(e);w(s)!==v&&d(v)},configurable:!0,enumerable:!0}),E(()=>{const e=s();e?i.getAttribute("value")!==e&&i.setAttribute("value",e):i.hasAttribute("value")&&i.removeAttribute("value")});const o=()=>(u.options??[]).map(e=>({value:e.value,label:e.label,icon:e.icon?F(e.icon,{class:"size-4 shrink-0",imgClass:"size-4 shrink-0",spanClass:"inline-flex size-4 shrink-0 items-center justify-center",ariaHidden:!0}):void 0}));return[O(),m(K,{get options(){return o()},get value(){return s()},get size(){return u.size??"md"},onChange:e=>n(e)})]});