@kitn.ai/ui/dist/elements/coachmark.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{x as K,r as N,g as $,h as Q,p as T,u as R,i as s,c,P as U,d as z,S as x,a as O,z as n,b as P,t as u,e as V,f as W,q as A}from"./chunks/define-CNSKFZCd.js";import{c as D}from"./chunks/cn-CU7UAWzk.js";import{c as X,u as Y}from"./chunks/overlay-B1-MBI6h.js";import{x as Z}from"./chunks/x-Ckwicf6g.js";import{w as ee}from"./chunks/disclosure-BcBs--Jf.js";var re=u("<span style=display:inline-flex;vertical-align:middle>"),te=u('<div part=arrow aria-hidden=true class="absolute size-2 rotate-45">'),oe=u("<span part=badge>"),ae=u('<div class="flex items-center gap-2"><span part=title class="font-semibold leading-tight">'),ne=u("<div>"),ie=u("<div part=bubble role=dialog style=position:fixed><button type=button part=dismiss aria-label=Dismiss>");const le={top:"bottom",bottom:"top",left:"right",right:"left"},se={primary:{bg:"var(--color-primary)",fg:"var(--color-primary-foreground)"},info:{bg:"var(--color-tool-blue)",fg:"#fff"},success:{bg:"var(--color-tool-green)",fg:"#fff"},warning:{bg:"var(--color-warning-soft)",fg:"var(--color-foreground)"},error:{bg:"var(--color-tool-red)",fg:"#fff"}},de="text-current/70 hover:bg-current/15 hover:text-current",ce="bg-current/20",ue="text-current/85";function ge(t){var g;const w=K(),p=()=>se[t.tone??"primary"],v=N(),[i,B]=$(t.defaultOpen??!1),[L,F]=$(),[G,H]=$(),[I,J]=$(),_=()=>t.open!==void 0,C=()=>_()?!!t.open:i(),E=r=>{var a;_()||B(r),(a=t.onOpenChange)==null||a.call(t,r)};(g=t.controllerRef)==null||g.call(t,{open:C,setOpen:E});const k=X(C),d=Y(L,G,{placement:t.placement??"bottom",gutter:10,arrowEl:I,onDisconnect:()=>E(!1)}),y=()=>le[d.pos().placement.split("-")[0]]??"top",j=()=>{var r;E(!1),(r=t.onDismiss)==null||r.call(t)};return Q(()=>{const r=L();if(!r)return;const a=()=>{C()&&j()};r.addEventListener("click",a),T(()=>r.removeEventListener("click",a))}),[(()=>{var r=re();return R(F,r),s(r,()=>t.children),r})(),c(x,{get when(){return k.present()},get children(){return c(U,{get mount(){return w.portalMount()},get children(){var r=ie(),a=r.firstChild;return R(e=>{H(e),k.setRef(e)},r),z(r,"aria-labelledby",v),s(r,c(x,{get when(){return t.arrow!==!1},get children(){var e=te();return R(J,e),O(o=>{var l=y()==="left"?"-4px":d.arrowPos().x!=null?`${d.arrowPos().x}px`:"",f=y()==="top"?"-4px":d.arrowPos().y!=null?`${d.arrowPos().y}px`:"",m=y()==="right"?"-4px":"",h=y()==="bottom"?"-4px":"",b=`var(--kai-coachmark-bg, ${p().bg})`;return l!==o.e&&n(e,"left",o.e=l),f!==o.t&&n(e,"top",o.t=f),m!==o.a&&n(e,"right",o.a=m),h!==o.o&&n(e,"bottom",o.o=h),b!==o.i&&n(e,"background",o.i=b),o},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),e}}),a),a.$$click=j,s(a,c(Z,{class:"size-3.5","aria-hidden":"true"})),s(r,c(x,{get when(){return t.headline},get children(){var e=ae(),o=e.firstChild;return z(o,"id",v),s(o,()=>t.headline),s(e,c(x,{get when(){return t.badge},get children(){var l=oe();return s(l,()=>t.badge),O(()=>P(l,D("inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.625rem] font-medium uppercase leading-none tracking-wide",ce))),l}}),null),e}}),null),s(r,c(x,{get when(){return t.content},get children(){var e=ne();return s(e,()=>t.content),O(()=>P(e,D(ue,t.headline?"mt-1.5":""))),e}}),null),O(e=>{var o=k.state()==="open"?"":void 0,l=k.state()==="closed"?"":void 0,f=`${d.pos().x}px`,m=`${d.pos().y}px`,h=d.hidden()?"hidden":"visible",b=`var(--kai-coachmark-bg, ${p().bg})`,q=`var(--kai-coachmark-fg, ${p().fg})`,M=D("z-50 w-64 rounded-lg p-3 pr-8 text-sm kai-elevation","animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95"),S=D("absolute right-2 top-2 inline-flex size-5 items-center justify-center rounded transition-colors",de);return o!==e.e&&z(r,"data-expanded",e.e=o),l!==e.t&&z(r,"data-closed",e.t=l),f!==e.a&&n(r,"left",e.a=f),m!==e.o&&n(r,"top",e.o=m),h!==e.i&&n(r,"visibility",e.i=h),b!==e.n&&n(r,"background",e.n=b),q!==e.s&&n(r,"color",e.s=q),M!==e.h&&P(r,e.h=M),S!==e.r&&P(a,e.r=S),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0}),r}})}})]}V(["click"]);var pe=u("<slot>"),ve=u("<slot name=content>");W("kai-coachmark",{open:void 0,defaultOpen:void 0,headline:void 0,badge:void 0,placement:void 0,tone:void 0,arrow:!0},(t,g)=>{const{flag:w,dispatch:p}=g;let v;return ee(g,()=>v,()=>t.open),c(ge,{get defaultOpen(){return w("defaultOpen")},get arrow(){return w("arrow")},get placement(){return t.placement},get tone(){return t.tone},get headline(){return t.headline},get badge(){return t.badge},get content(){return(()=>{var i=ve();return i._$owner=A(),i})()},controllerRef:i=>v=i,onDismiss:()=>p("kai-dismiss",{}),get children(){var i=pe();return i._$owner=A(),i}})});