@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) • 1.5 kB
JavaScript
import{s as C,r as M,k as P,m as z,i as c,c as S,d as o,S as q,a as A,b as B,z as E,t as g}from"./define-CNSKFZCd.js";import{c as h}from"./cn-CU7UAWzk.js";var I=g('<span class="text-xs text-muted-foreground">'),L=g('<div><div part=track role=progressbar aria-valuemin=0 class="h-1.5 w-full overflow-hidden rounded-full bg-surface-strong"><div part=fill>');const N={primary:"bg-primary",success:"bg-tool-green",warning:"bg-tool-amber",error:"bg-tool-red",info:"bg-tool-blue"};function R(p){const[r,x]=C(p,["value","max","label","tone","class","aria-label","aria-labelledby"]),i=M(),t=()=>r.max??100,s=()=>{const e=t();return e>0?Math.max(0,Math.min(r.value,e)):0},w=()=>{const e=t();return e>0?s()/e*100:0},y=()=>r.label?i:r["aria-labelledby"],k=()=>r.label||r["aria-labelledby"]?void 0:r["aria-label"]??"Progress";return(()=>{var e=L(),l=e.firstChild,n=l.firstChild;return P(e,z({get class(){return h("flex flex-col gap-1",r.class)}},x),!1,!0),c(e,S(q,{get when(){return r.label},get children(){var a=I();return o(a,"id",i),c(a,()=>r.label),a}}),l),A(a=>{var d=s(),u=t(),b=y(),v=k(),f=h("h-full rounded-full motion-safe:transition-[width] motion-safe:duration-500 motion-safe:ease-out",N[r.tone??"primary"]),m=`${w()}%`;return d!==a.e&&o(l,"aria-valuenow",a.e=d),u!==a.t&&o(l,"aria-valuemax",a.t=u),b!==a.a&&o(l,"aria-labelledby",a.a=b),v!==a.o&&o(l,"aria-label",a.o=v),f!==a.i&&B(n,a.i=f),m!==a.n&&E(n,"width",a.n=m),a},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0}),e})()}export{R as P};