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) 3.49 kB
import{m as u,s as I,r as S,g as j,c as n,i,S as a,a as h,d as E,b as K,D as P,n as l,t as s,e as _}from"./define-CNSKFZCd.js";import{c as v}from"./cn-CU7UAWzk.js";import{t as q}from"./triangle-alert-B07fX3Q8.js";import{x as A}from"./x-Ckwicf6g.js";var B=s('<h3 class="text-[1.0625rem] font-semibold leading-snug tracking-tight text-foreground">'),F=s('<p class="text-[0.8125rem] leading-relaxed text-muted-foreground">'),H=s("<div>"),L=s('<div role=alert class="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive dark:bg-destructive/15 dark:text-red-400"><span>'),N=s('<div class="text-sm text-foreground">'),O=s('<div class="flex flex-wrap items-center justify-end gap-2 pt-1">'),R=s('<button type=button part=dismiss aria-label=Dismiss class="absolute right-2.5 top-2.5 z-10 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">'),U=s('<div class="overflow-hidden rounded-lg">');function V(p){const b=u({dense:!1},p),[r,f]=I(b,["heading","description","media","actions","errorMessage","dense","headingId","dismissible","onDismiss","href","target","rel","clickable","onCardClick","class","children"]),m=S(),x=()=>r.headingId??`kai-card-heading-${m}`,k=()=>r.errorMessage!==void 0&&r.errorMessage!=="",w=()=>!!r.heading||!!r.description,[C,y]=j(!0),D=e=>{var t;e.stopPropagation(),y(!1),(t=r.onDismiss)==null||t.call(r)},d=()=>!!r.href,o=()=>!d()&&!!r.clickable,g=()=>d()||o(),c=e=>{var t;return(t=r.onCardClick)==null?void 0:t.call(r,e)},M=e=>{o()&&(e.key==="Enter"||e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),c(e))},z=()=>r.rel??(r.target==="_blank"?"noopener noreferrer":void 0),$=[n(a,{get when(){return w()},get children(){var e=H();return i(e,n(a,{get when(){return r.heading},get children(){var t=B();return i(t,()=>r.heading),h(()=>E(t,"id",x())),t}}),null),i(e,n(a,{get when(){return r.description},get children(){var t=F();return i(t,()=>r.description),t}}),null),h(()=>K(e,v("flex flex-col border-b border-border",r.dense?"gap-0.5 pb-2.5":"gap-1 pb-4"))),e}}),n(a,{get when(){return k()},get fallback(){return[n(a,{get when(){return r.children},get children(){var e=N();return i(e,()=>r.children),e}}),n(a,{get when(){return r.actions},get children(){var e=O();return i(e,()=>r.actions),e}})]},get children(){var e=L(),t=e.firstChild;return i(e,n(q,{size:16,class:"mt-0.5 shrink-0","aria-hidden":"true"}),t),i(t,()=>r.errorMessage),e}})];return n(a,{get when(){return C()},get children(){return n(P,u({get component(){return d()?"a":"div"},part:"card",get href(){return l(()=>!!d())()?r.href:void 0},get target(){return l(()=>!!d())()?r.target:void 0},get rel(){return l(()=>!!d())()?z():void 0},get role(){return o()?"button":void 0},get tabindex(){return o()?0:void 0},get onClick(){return g()?c:void 0},get onKeyDown(){return o()?M:void 0},get class(){return v("relative flex flex-col rounded-xl border border-border bg-card text-card-foreground kai-elevation-sm",r.dense?"gap-2.5 p-3.5":"gap-4 p-5",g()&&"cursor-pointer no-underline transition-colors hover:border-ring hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",r.class)}},f,{get children(){return[n(a,{get when(){return r.dismissible},get children(){var e=R();return e.$$click=D,i(e,n(A,{class:"size-3.5","aria-hidden":"true"})),e}}),n(a,{get when(){return r.media},get children(){var e=U();return i(e,()=>r.media),e}}),$]}}))}})}_(["click"]);export{V as C};