@kitn.ai/ui/dist/elements/card.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,s as M,g as y,r as j,i as n,c as a,S as c,D as K,n as x,t as o,e as P,f as X,o as F,q as E,d as G,p as H}from"./chunks/define-CNSKFZCd.js";import{c as I}from"./chunks/cn-CU7UAWzk.js";import{x as J}from"./chunks/x-Ckwicf6g.js";var N=o('<div class="min-w-0 flex-1">'),Q=o('<div class="-mt-1 shrink-0">'),R=o('<div part=header class="flex items-start justify-between gap-3">'),U=o('<div part=body class="min-w-0 text-sm">'),V=o("<div class=kc-actions>"),W=o("<div part=footer>"),Y=o('<div class="flex min-w-0 flex-1 flex-col"style=padding:var(--kai-card-spacing);gap:var(--kai-card-spacing)>'),Z=o('<button type=button part=dismiss aria-label=Dismiss class="absolute right-2 top-2 z-10 shrink-0 rounded p-1 opacity-60 transition-opacity hover:opacity-100">'),ee=o("<style>"),re=o("<div part=media class=kc-media>"),te=o("<div class=kc-layout>");const ne={outlined:"border border-border bg-card text-card-foreground kai-elevation-sm",filled:"border border-transparent bg-surface-strong text-card-foreground",plain:"border border-transparent bg-transparent",accent:"border border-transparent bg-primary text-primary-foreground"};function ae(u){const f=C({appearance:"outlined",orientation:"vertical",collapse:"28rem",dense:!1},u),[e,v]=M(f,["appearance","orientation","collapse","dense","media","header","headerActions","footer","footerActions","hasBody","dismissible","onDismiss","href","target","rel","clickable","onCardClick","class","children"]),[b,k]=y(!0),w=r=>{var t;r.stopPropagation(),k(!1),(t=e.onDismiss)==null||t.call(e)},g=()=>!!e.href,s=()=>!g()&&!!e.clickable,l=()=>g()||s(),h=/^[\d.]+(px|rem|em|ch|vw|vh|%)$/,m=()=>h.test(e.collapse)?e.collapse:"28rem",d=`kc-i-${j()}`,_=()=>{const r=m(),t=e.orientation==="horizontal",i=e.orientation==="responsive",p=`.${d}`,q=`${p} .kc-layout{display:flex;flex-direction:${t?"row":"column"}}${p} .kc-media{overflow:hidden;${t?"flex-shrink:0;align-self:stretch":"width:100%"}}${p} [part="footer"]{display:flex;flex-direction:column;gap:0.75rem}${p} .kc-actions{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0.5rem}`,L=`${p} [part="footer"]{flex-direction:row;align-items:center}${p} .kc-actions{flex-direction:row;align-items:center;margin-left:auto}`+(i?`${p} .kc-layout{flex-direction:row}${p} .kc-media{width:auto;flex-shrink:0;align-self:stretch}`:"");return`${q}@container (min-width:${r}){${L}}`},$=r=>{var t;return(t=e.onCardClick)==null?void 0:t.call(e,r)},B=r=>{s()&&(r.key==="Enter"||r.key===" "||r.key==="Spacebar")&&(r.preventDefault(),$(r))},z=()=>e.rel??(e.target==="_blank"?"noopener noreferrer":void 0),A=()=>!!e.header||!!e.headerActions,D=()=>!!e.footer||!!e.footerActions,O=()=>A()||e.hasBody||D(),S=(()=>{var r=Y();return n(r,a(c,{get when(){return A()},get children(){var t=R();return n(t,a(c,{get when(){return e.header},get children(){var i=N();return n(i,()=>e.header),i}}),null),n(t,a(c,{get when(){return e.headerActions},get children(){var i=Q();return n(i,()=>e.headerActions),i}}),null),t}}),null),n(r,a(c,{get when(){return e.hasBody},get children(){var t=U();return n(t,()=>e.children),t}}),null),n(r,a(c,{get when(){return D()},get children(){var t=W();return n(t,a(c,{get when(){return e.footer},get children(){var i=N();return n(i,()=>e.footer),i}}),null),n(t,a(c,{get when(){return e.footerActions},get children(){var i=V();return n(i,()=>e.footerActions),i}}),null),t}}),null),r})();return a(c,{get when(){return b()},get children(){return a(K,C({get component(){return g()?"a":"div"},part:"card",get href(){return x(()=>!!g())()?e.href:void 0},get target(){return x(()=>!!g())()?e.target:void 0},get rel(){return x(()=>!!g())()?z():void 0},get role(){return s()?"button":void 0},get tabindex(){return s()?0:void 0},get onClick(){return l()?$:void 0},get onKeyDown(){return s()?B:void 0},get style(){return{"--kai-card-spacing":e.dense?"0.875rem":"1.25rem"}},get class(){return I("relative block overflow-hidden rounded-xl no-underline @container",d,ne[e.appearance],l()&&"cursor-pointer transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",e.class)}},v,{get children(){return[a(c,{get when(){return e.dismissible},get children(){var r=Z();return r.$$click=w,n(r,a(J,{class:"size-3.5","aria-hidden":"true"})),r}}),(()=>{var r=ee();return n(r,_),r})(),(()=>{var r=te();return n(r,a(c,{get when(){return e.media},get children(){var t=re();return n(t,()=>e.media),t}}),null),n(r,a(c,{get when(){return O()},children:S}),null),r})()]}}))}})}P(["click"]);var T=o("<slot>");const ie=["media","header","header-actions","footer","footer-actions"];X("kai-card",{appearance:"outlined",orientation:"vertical",collapse:"28rem",dense:!1,dismissible:!1,href:void 0,target:void 0,rel:void 0,clickable:!1},(u,{element:f,dispatch:e,flag:v})=>{const[b,k]=y({media:!1,header:!1,"header-actions":!1,footer:!1,"footer-actions":!1}),[w,g]=y(!1);F(()=>{const l=()=>{const m={};for(const d of ie)m[d]=!!f.querySelector(`:scope > [slot="${d}"]`);k(m),g(Array.from(f.childNodes).some(d=>d.nodeType===Node.ELEMENT_NODE&&!d.hasAttribute("slot")||d.nodeType===Node.TEXT_NODE&&(d.textContent??"").trim()!==""))};l();const h=new MutationObserver(l);h.observe(f,{childList:!0,characterData:!0,subtree:!0}),H(()=>h.disconnect())});const s=l=>b()[l]?(()=>{var h=T();return G(h,"name",l),h._$owner=E(),h})():void 0;return a(ae,{get appearance(){return u.appearance},get orientation(){return u.orientation},get collapse(){return u.collapse},get dense(){return v("dense")},get dismissible(){return v("dismissible")},get href(){return u.href},get target(){return u.target},get rel(){return u.rel},get clickable(){return v("clickable")},onDismiss:()=>e("kai-dismiss"),onCardClick:()=>e("kai-card-click"),get media(){return s("media")},get header(){return s("header")},get headerActions(){return s("header-actions")},get footer(){return s("footer")},get footerActions(){return s("footer-actions")},get hasBody(){return w()},get children(){var l=T();return l._$owner=E(),l}})});