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.

ui.kitn.ai

kitn-ai/ui

2 lines (1 loc) • 28.5 kB
1
2
import{c as u,m as x,i as m,S as y,k as L,n as pe,d as j,a as k,F as C,b as T,g as he,t as b,e as ve,s as be,j as E,h as K,l as D,o as xe,E as ye,I as ke,f as we}from"./chunks/define-CNSKFZCd.js";import{c as ee,p as q,u as J}from"./chunks/store-th4VyJXM.js";import{c as O}from"./chunks/cn-CU7UAWzk.js";import{B as N}from"./chunks/button-DBDZebGr.js";import{C as z}from"./chunks/card-YfCyI4fH.js";import{u as Ie,a as $e,D as Ae}from"./chunks/use-card-resolution-M36zVciB.js";import{e as Se}from"./chunks/card-routing-C986KuUA.js";import{T as je}from"./chunks/textarea-CboigarR.js";import{I as Ce,F as R}from"./chunks/input-DZD67EvW.js";import{s as Oe}from"./chunks/star-DY6z1UUH.js";import{c as Le}from"./chunks/check-fhmRksq_.js";function _(e){return e===null?"null":Array.isArray(e)?"array":typeof e}function Be(e,r){switch(r){case"integer":return typeof e=="number"&&Number.isInteger(e);case"number":return typeof e=="number"&&Number.isFinite(e);case"array":return Array.isArray(e);case"null":return e===null;case"object":return _(e)==="object";default:return typeof e===r}}function F(e,r,t,n){const a=t||"(root)";if(e.type&&!Be(r,e.type)){n.push(`${a}: expected ${e.type}, got ${_(r)}`);return}if("const"in e&&JSON.stringify(r)!==JSON.stringify(e.const)&&n.push(`${a}: must equal const ${JSON.stringify(e.const)}`),e.enum&&!e.enum.some(i=>JSON.stringify(i)===JSON.stringify(r))&&n.push(`${a}: must be one of ${JSON.stringify(e.enum)}`),typeof r=="number"&&(e.minimum!==void 0&&r<e.minimum&&n.push(`${a}: < minimum ${e.minimum}`),e.maximum!==void 0&&r>e.maximum&&n.push(`${a}: > maximum ${e.maximum}`),e.exclusiveMinimum!==void 0&&r<=e.exclusiveMinimum&&n.push(`${a}: <= exclusiveMinimum`),e.exclusiveMaximum!==void 0&&r>=e.exclusiveMaximum&&n.push(`${a}: >= exclusiveMaximum`)),typeof r=="string"&&(e.minLength!==void 0&&r.length<e.minLength&&n.push(`${a}: shorter than minLength ${e.minLength}`),e.maxLength!==void 0&&r.length>e.maxLength&&n.push(`${a}: longer than maxLength ${e.maxLength}`),e.pattern!==void 0&&!new RegExp(e.pattern).test(r)&&n.push(`${a}: does not match pattern`)),Array.isArray(r)&&(e.minItems!==void 0&&r.length<e.minItems&&n.push(`${a}: fewer than minItems ${e.minItems}`),e.maxItems!==void 0&&r.length>e.maxItems&&n.push(`${a}: more than maxItems ${e.maxItems}`),e.uniqueItems&&new Set(r.map(i=>JSON.stringify(i))).size!==r.length&&n.push(`${a}: items not unique`),e.items&&r.forEach((i,l)=>F(e.items,i,`${a}[${l}]`,n))),_(r)==="object"){const i=r;for(const l of e.required??[])(!(l in i)||i[l]===void 0)&&n.push(`${a}.${l}: required`);if(e.properties)for(const[l,d]of Object.entries(e.properties))l in i&&i[l]!==void 0&&F(d,i[l],`${a}.${l}`,n)}}function qe(e,r){const t=[];return F(e,r,"",t),{valid:t.length===0,errors:t}}var Me=b('<span class="self-end text-xs text-muted-foreground">/'),Ee=b('<div class="flex flex-col gap-1">'),Ne=b("<input data-control type=number>"),Re=b('<div class="flex items-center gap-3"><input data-control type=range class=kai-range><span class="min-w-9 shrink-0 rounded-md bg-background px-2 py-1 text-center text-sm font-medium tabular-nums text-foreground shadow-sm">'),Te=b('<div role=radiogroup data-control tabindex=0 class="flex items-center gap-1 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'),Ke=b('<button type=button role=radio tabindex=-1 class="rounded p-0.5 text-muted-foreground hover:text-foreground">'),Ve=b("<button data-control type=button role=switch><span>"),De=b('<label class="-mx-1.5 inline-flex cursor-pointer items-center gap-2.5 rounded-md px-1.5 py-1.5 text-sm text-foreground transition-colors hover:bg-muted/60"><input data-control type=checkbox class=kai-checkbox><span>'),Je=b('<div role=radiogroup data-control class="divide-y divide-border overflow-hidden rounded-lg border border-input">'),ze=b("<label><input type=radio class=kai-radio><span>"),_e=b("<select data-control><option value disabled>"),re=b("<option>"),Fe=b('<div role=group data-control class="divide-y divide-border overflow-hidden rounded-lg border border-input">'),Ue=b("<label><input type=checkbox class=kai-checkbox><span>"),Ye=b("<select data-control multiple>"),Ze=b('<div class="flex flex-col gap-2"role=group><div class="flex flex-wrap gap-1.5"></div><div class="flex items-center gap-2"><input data-control type=text><button type=button class="rounded-md border border-input px-3 py-2 text-sm text-foreground hover:bg-muted disabled:opacity-50">Add'),Ge=b('<span class="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-foreground"><button type=button class="text-muted-foreground hover:text-foreground">\u2715');function A(e){return{"aria-required":e.required||void 0,"aria-invalid":e.invalid||void 0,"aria-describedby":e.describedBy}}function He(e){const r=()=>{switch(e.variant){case"email":return"email";case"url":return"url";case"date":return"date";case"datetime":return"datetime-local";case"time":return"time";case"password":return"password";default:return"text"}};return u(Ce,x({get id(){return e.id},"data-control":!0,get type(){return r()},get value(){return e.value??""},get placeholder(){return e.placeholder},get invalid(){return e.invalid},get disabled(){return e.disabled},get minLength(){return e.field.minLength},get maxLength(){return e.field.maxLength}},()=>A(e),{onValueInput:t=>e.onInput(t),onValueChange:()=>e.onBlur()}))}function Pe(e){const r=()=>(e.value??"").length;return(()=>{var t=Ee();return m(t,u(je,x({get id(){return e.id},"data-control":!0,get class(){return O(R,e.invalid&&"border-destructive dark:border-red-400/70")},get value(){return e.value??""},get placeholder(){return e.placeholder},get disabled(){return e.disabled},get maxLength(){return e.field.maxLength}},()=>A(e),{onInput:n=>e.onInput(n.currentTarget.value),get onBlur(){return e.onBlur}})),null),m(t,u(y,{get when(){return e.field.maxLength!==void 0},get children(){var n=Me(),a=n.firstChild;return m(n,r,a),m(n,()=>e.field.maxLength,null),n}}),null),t})()}function Qe(e){const r=()=>e.field["x-kai-step"]??(e.field.type==="integer"?1:void 0);return(()=>{var t=Ne();return L(t,x({get id(){return e.id},get class(){return O(R,e.invalid&&"border-destructive dark:border-red-400/70")},get value(){return pe(()=>e.value===void 0||e.value===null)()?"":String(e.value)},get placeholder(){return e.placeholder},get disabled(){return e.disabled},get min(){return e.field.minimum},get max(){return e.field.maximum},get step(){return r()}},()=>A(e),{onInput:n=>e.onInput(n.currentTarget.value),get onBlur(){return e.onBlur}}),!1,!1),t})()}function We(e){const r=()=>e.field.minimum??0,t=()=>e.field.maximum??100,n=()=>e.field["x-kai-step"]??(e.field.type==="integer"?1:void 0),a=()=>e.value===void 0||e.value===null?r():Number(e.value),i=()=>{const l=r(),d=t();return d>l?`${(a()-l)/(d-l)*100}%`:"0%"};return(()=>{var l=Re(),d=l.firstChild,h=d.nextSibling;return L(d,x({get id(){return e.id},get style(){return{"--kai-range-fill":i()}},get value(){return a()},get min(){return r()},get max(){return t()},get step(){return n()},get disabled(){return e.disabled},get"aria-valuetext"(){return String(a())}},()=>A(e),{onInput:v=>e.onInput(Number(v.currentTarget.value)),get onBlur(){return e.onBlur}}),!1,!1),m(h,a),l})()}function Xe(e){const r=()=>e.field.maximum??5,t=()=>Number(e.value??0),n=()=>Array.from({length:r()},(i,l)=>l+1),a=i=>{i.key==="ArrowRight"||i.key==="ArrowUp"?(i.preventDefault(),e.onInput(Math.min(r(),t()+1))):(i.key==="ArrowLeft"||i.key==="ArrowDown")&&(i.preventDefault(),e.onInput(Math.max(e.field.minimum??1,t()-1)))};return(()=>{var i=Te();return L(i,x({get"aria-label"(){return e.label}},()=>A(e),{onKeyDown:a}),!1,!0),m(i,u(C,{get each(){return n()},children:l=>(()=>{var d=Ke();return d.$$click=()=>e.onInput(l),j(d,"aria-label",`${l} ${l===1?"star":"stars"}`),m(d,u(Oe,{size:20,get class(){return O(l<=t()?"fill-current text-[var(--color-primary)]":"")},"aria-hidden":"true"})),k(h=>{var v=t()===l,p=e.disabled;return v!==h.e&&j(d,"aria-checked",h.e=v),p!==h.t&&(d.disabled=h.t=p),h},{e:void 0,t:void 0}),d})()})),i})()}function er(e){const r=()=>e.value===!0,t=()=>{e.disabled||(e.onInput(!r()),e.onBlur())};return(()=>{var n=Ve(),a=n.firstChild;return L(n,x({get id(){return e.id},get"aria-checked"(){return r()},get"aria-label"(){return e.label},get disabled(){return e.disabled},get class(){return O("relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",r()?"bg-[var(--color-primary)]":"bg-muted")}},()=>A(e),{onClick:t}),!1,!0),k(()=>T(a,O("inline-block h-5 w-5 transform rounded-full bg-background shadow transition-transform",r()?"translate-x-5":"translate-x-0.5"))),n})()}function rr(e){return(()=>{var r=De(),t=r.firstChild,n=t.nextSibling;return L(t,x({get id(){return e.id},get checked(){return e.value===!0},get disabled(){return e.disabled}},()=>A(e),{onChange:a=>{e.onInput(a.currentTarget.checked),e.onBlur()}}),!1,!1),m(n,()=>e.label),r})()}function tr(e){const r=()=>e.field.enum??[];return(()=>{var t=Je();return L(t,x({get"aria-label"(){return e.label}},()=>A(e)),!1,!0),m(t,u(C,{get each(){return r()},children:n=>(()=>{var a=ze(),i=a.firstChild,l=i.nextSibling;return i.addEventListener("change",()=>{e.onInput(n),e.onBlur()}),m(l,()=>String(n)),k(d=>{var h=O("flex cursor-pointer items-center gap-3 px-3 py-2.5 text-sm transition-colors",e.value===n?"bg-accent font-medium text-accent-foreground":"text-foreground hover:bg-muted/50"),v=e.id,p=e.disabled;return h!==d.e&&T(a,d.e=h),v!==d.t&&j(i,"name",d.t=v),p!==d.a&&(i.disabled=d.a=p),d},{e:void 0,t:void 0,a:void 0}),k(()=>i.value=String(n)),k(()=>i.checked=e.value===n),a})()})),t})()}function nr(e){const r=()=>e.field.enum??[];return(()=>{var t=_e(),n=t.firstChild;return L(t,x({get id(){return e.id},get class(){return O(R,e.invalid&&"border-destructive dark:border-red-400/70")},get disabled(){return e.disabled}},()=>A(e),{onChange:a=>{e.onInput(a.currentTarget.value),e.onBlur()}}),!1,!0),m(n,()=>e.placeholder??"Select\u2026"),m(t,u(C,{get each(){return r()},children:a=>(()=>{var i=re();return m(i,()=>String(a)),k(()=>i.selected=e.value===a),k(()=>i.value=String(a)),i})()}),null),k(()=>n.selected=e.value===void 0||e.value===""),t})()}function te(e){const r=e.items;return r&&"enum"in r&&Array.isArray(r.enum)?r.enum:[]}function ir(e){const r=()=>Array.isArray(e.value)?e.value:[],t=n=>{const a=r(),i=a.includes(n)?a.filter(l=>l!==n):[...a,n];e.onInput(i),e.onBlur()};return(()=>{var n=Fe();return L(n,x({get"aria-label"(){return e.label}},()=>A(e)),!1,!0),m(n,u(C,{get each(){return te(e.field)},children:a=>(()=>{var i=Ue(),l=i.firstChild,d=l.nextSibling;return l.addEventListener("change",()=>t(a)),m(d,()=>String(a)),k(h=>{var v=O("flex cursor-pointer items-center gap-3 px-3 py-2.5 text-sm transition-colors",r().includes(a)?"bg-accent font-medium text-accent-foreground":"text-foreground hover:bg-muted/50"),p=e.disabled;return v!==h.e&&T(i,h.e=v),p!==h.t&&(l.disabled=h.t=p),h},{e:void 0,t:void 0}),k(()=>l.checked=r().includes(a)),i})()})),n})()}function ar(e){const r=()=>Array.isArray(e.value)?e.value:[];return(()=>{var t=Ye();return L(t,x({get id(){return e.id},get"aria-label"(){return e.label},get class(){return O(R,"min-h-[6rem]",e.invalid&&"border-destructive dark:border-red-400/70")},get disabled(){return e.disabled}},()=>A(e),{onChange:n=>{const a=Array.from(n.currentTarget.selectedOptions).map(i=>i.value);e.onInput(a),e.onBlur()}}),!1,!0),m(t,u(C,{get each(){return te(e.field)},children:n=>(()=>{var a=re();return m(a,()=>String(n)),k(()=>a.selected=r().includes(n)),k(()=>a.value=String(n)),a})()})),t})()}function lr(e){const r=()=>Array.isArray(e.value)?e.value:[],[t,n]=he(""),a=()=>{const l=t().trim();l&&(e.onInput([...r(),l]),n(""),e.onBlur())},i=l=>{e.onInput(r().filter((d,h)=>h!==l)),e.onBlur()};return(()=>{var l=Ze(),d=l.firstChild,h=d.nextSibling,v=h.firstChild,p=v.nextSibling;return m(d,u(C,{get each(){return r()},children:(g,S)=>(()=>{var w=Ge(),I=w.firstChild;return m(w,g,I),I.$$click=()=>i(S()),j(I,"aria-label",`Remove ${g}`),k(()=>I.disabled=e.disabled),w})()})),L(v,x({get id(){return e.id},get class(){return O(R)},get value(){return t()},get placeholder(){return e.placeholder??"Add\u2026"},get disabled(){return e.disabled}},()=>A(e),{onInput:g=>n(g.currentTarget.value),onKeyDown:g=>{g.key==="Enter"&&(g.preventDefault(),a())}}),!1,!1),p.$$click=a,k(g=>{var S=e.label,w=e.disabled;return S!==g.e&&j(l,"aria-label",g.e=S),w!==g.t&&(p.disabled=g.t=w),g},{e:void 0,t:void 0}),l})()}ve(["click"]);var ur=b("<form novalidate>"),sr=b('<div class="flex w-full flex-wrap items-center justify-between gap-2"><div class="ml-auto flex flex-wrap items-center gap-2">'),or=b('<div class="flex flex-col gap-3"><p class="flex items-center gap-2 text-sm font-medium text-foreground"><span>Submitted</span></p><dl class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5">'),dr=b('<dt class="text-xs text-muted-foreground">'),cr=b('<dd class="m-0 text-sm font-medium text-foreground">'),mr=b('<span class="text-destructive dark:text-red-400"aria-hidden=true> *'),gr=b('<label class="text-sm font-medium text-foreground">'),fr=b('<p class="text-xs text-muted-foreground">'),pr=b('<p role=alert class="text-xs text-destructive dark:text-red-400">'),hr=b('<div class="flex flex-col gap-2 rounded-xl bg-surface p-3.5">'),vr=b('<p class="rounded-md border border-dashed border-border p-2 text-xs text-muted-foreground">Unsupported field "<!>".'),br=b('<fieldset class="flex flex-col gap-3 rounded-lg border border-border p-3"><legend class="px-1 text-sm font-medium text-foreground">'),xr=b('<fieldset class="flex flex-col gap-3 rounded-lg border border-border p-3"data-control><legend class="px-1 text-sm font-medium text-foreground">'),yr=b('<div class="flex flex-col gap-2 rounded-md border border-border/60 p-2"><div class="flex items-center justify-between"><span class="text-xs text-muted-foreground">Item ');const U=4,kr=new Set(["textarea","slider","rating","radio","select","checkbox","password","switch"]);function wr(e,r){const t=e["x-kai-widget"];if(t&&kr.has(t))switch(t){case"textarea":return"textarea";case"slider":return"slider";case"rating":return"rating";case"radio":return"radio";case"select":return"select";case"checkbox":return"checkbox";case"password":return"password";case"switch":return"switch"}switch(e.type){case"string":{if(Array.isArray(e.enum))return e.enum.length<=r?"radio":"select";switch(e.format){case"email":return"email";case"uri":case"url":return"url";case"date":return"date";case"date-time":return"datetime";case"time":return"time"}return e.maxLength!==void 0&&e.maxLength>120?"textarea":"text"}case"number":case"integer":return"number";case"boolean":return"switch";case"array":{const n=e.items;return n&&"enum"in n&&Array.isArray(n.enum)?n.enum.length<=r?"checkbox-group":"multiselect":n&&"type"in n&&n.type==="object"?"repeater":(n&&"type"in n&&n.type,"taglist")}case"object":return"fieldset";default:return"unsupported"}}function Y(e){return e.replace(/[_-]+/g," ").replace(/([a-z0-9])([A-Z])/g,"$1 $2").trim().replace(/\b\w/g,r=>r.toUpperCase())}function Ir(e){const r=Object.keys(e.properties??{}),t=e["x-kai-order"];if(Array.isArray(t)){const i=t.filter(d=>r.includes(d)),l=r.filter(d=>!i.includes(d));return[...i,...l]}const n=(e.required??[]).filter(i=>r.includes(i)),a=r.filter(i=>!n.includes(i));return[...n,...a]}function $r(e,r){if(e.type==="number"||e.type==="integer"){if(r===""||r===null||r===void 0)return;const t=typeof r=="number"?r:Number(r);return Number.isNaN(t)?r:t}return e.type==="boolean"?!!r:r}const Ar="^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$";function Sr(e){const r={type:e.type};return e.enum&&(r.enum=e.enum),e.minimum!==void 0&&(r.minimum=e.minimum),e.maximum!==void 0&&(r.maximum=e.maximum),e.minLength!==void 0&&(r.minLength=e.minLength),e.maxLength!==void 0&&(r.maxLength=e.maxLength),e.minItems!==void 0&&(r.minItems=e.minItems),e.maxItems!==void 0&&(r.maxItems=e.maxItems),e.pattern!==void 0?r.pattern=e.pattern:e.format==="email"&&(r.pattern=Ar),r}function ne(e){return e==null||e===""||Array.isArray(e)&&e.length===0}function V(e,r){const t={},n=new Set(e.required??[]);for(const[a,i]of Object.entries(e.properties??{})){const l=r[a];if(n.has(a)&&ne(l)){t[a]=`${i.title??Y(a)} is required.`;continue}if(ne(l))continue;const d=qe(Sr(i),l);d.valid||(t[a]=jr(i,a,d.errors[0]))}return{valid:Object.keys(t).length===0,fieldErrors:t}}function jr(e,r,t){const n=e.title??Y(r);return t?t.includes("minimum")?`${n} must be at least ${e.minimum}.`:t.includes("maximum")?`${n} must be at most ${e.maximum}.`:t.includes("minLength")?`${n} must be at least ${e.minLength} characters.`:t.includes("maxLength")?`${n} must be at most ${e.maxLength} characters.`:t.includes("pattern")?e.format==="email"?`${n} must be a valid email address.`:`${n} is not in the expected format.`:t.includes("one of")?`${n} must be one of the allowed options.`:t.includes("expected integer")?`${n} must be a whole number.`:t.includes("expected")?`${n} is invalid.`:t.includes("minItems")?`${n}: choose at least ${e.minItems}.`:t.includes("maxItems")?`${n}: choose at most ${e.maxItems}.`:`${n} is invalid.`:`${n} is invalid.`}function Cr(e,r){return e?.["x-kai-widget"]==="password"?r==null||r===""?"\u2014":"\u2022\u2022\u2022\u2022":typeof r=="boolean"?r?"Yes":"No":r==null||r===""?"\u2014":Array.isArray(r)?r.length?r.map(t=>String(t)).join(", "):"\u2014":String(r)}function Or(e,r){const t=e.properties??{};return(Array.isArray(e["x-kai-order"])&&e["x-kai-order"].length>0?e["x-kai-order"].filter(n=>n in t):Object.keys(t)).map(n=>{const a=t[n];return{key:n,label:a?.title??n,value:Cr(a,r[n])}})}function ie(e,r){const t={};for(const n of Object.keys(e.properties??{})){const a=e.properties[n],i=$r(a,r[n]);i===void 0||i===""||Array.isArray(i)&&i.length===0||(t[n]=i)}return t}const ae={type:"object",properties:{}};function Lr(e){const r=x({cardId:"kai-form"},e),[t]=be(r,["data","cardId","heading","host","hostElement","class","resolution","values","defaultValues","disabled","onValuesChange","controllerRef"]),n=Ie(),a=s=>{const o=t.host??n;o?o.emit(s):t.hostElement&&Se(t.hostElement,s)},i=E(()=>{const s=t.data;return s?s.type!=="object"||typeof s.properties!="object"||s.properties===null?{ok:!1,message:"This form couldn't be displayed."}:{ok:!0,message:""}:{ok:!1,message:"No form definition provided."}}),l=E(()=>i().ok?t.data??ae:ae),d=()=>l()["x-kai-inlineMax"]??U,h=E(()=>Ir(l())),v=$e({prop:()=>t.resolution,data:()=>t.data}),[p,g]=ee({}),[S,w]=ee({}),I=s=>{const o={};for(const[c,f]of Object.entries(s.properties??{}))f.default!==void 0?o[c]=f.default:f.type==="array"&&(o[c]=[]);return t.defaultValues&&Object.assign(o,t.defaultValues),t.values&&Object.assign(o,t.values),o},M=s=>{const o=I(s);g(q(c=>{for(const f of Object.keys(c))delete c[f];Object.assign(c,o)})),w(q(c=>{for(const f of Object.keys(c))delete c[f]}))},ue=()=>{const s=l(),o={};for(const[c,f]of Object.entries(s.properties??{}))f.default!==void 0?o[c]=f.default:f.type==="array"&&(o[c]=[]);g(q(c=>{for(const f of Object.keys(c))delete c[f];Object.assign(c,o)})),w(q(c=>{for(const f of Object.keys(c))delete c[f]}))};K(D(()=>t.data,()=>{i().ok&&M(l())})),K(D(()=>t.values,s=>{s&&g(q(o=>{for(const c of Object.keys(o))delete o[c];Object.assign(o,s)}))},{defer:!0})),K(D(i,s=>{s.ok?a({kind:"ready",cardId:t.cardId}):a({kind:"error",cardId:t.cardId,message:s.message})})),K(()=>{var s;const o=t.hostElement;o&&(((s=v.resolution())==null?void 0:s.kind)==="submit"?o.setAttribute("data-kai-resolved","submitted"):o.removeAttribute("data-kai-resolved"))});const se=(s,o)=>{var c;g(s,o),S[s]&&w(s,void 0);const f=J(p),$=ie(l(),f),{valid:B}=V(l(),f);(c=t.onValuesChange)==null||c.call(t,{values:$,valid:B})},oe=s=>{const o=l().properties[s];if(!o)return;const c=V({required:l().required,properties:{[s]:o}},{[s]:p[s]});w(s,c.fieldErrors[s])},G=s=>{var o;return s?.closest("form")??s??((o=t.hostElement)==null?void 0:o.shadowRoot)??document},H=(s,o,c)=>{var f;(f=o.querySelector(`[data-field="${Tr(s)}"] [data-control]`))==null||f.focus(c)},P=s=>{if(v.isResolved())return!1;const o=J(p),c=V(l(),o);if(w(q($=>{for(const B of Object.keys($))delete $[B];Object.assign($,c.fieldErrors)})),!c.valid){const $=h().find(B=>c.fieldErrors[B]);if($){const B=G(s);queueMicrotask(()=>H($,B))}return!1}const f=ie(l(),o);return a({kind:"submit",cardId:t.cardId,data:f}),v.setLocal({kind:"submit",data:f}),!0},de=s=>{s.preventDefault(),P(s.currentTarget)},Q=()=>{v.isResolved()||(a({kind:"dismiss",cardId:t.cardId}),v.setLocal({kind:"dismissed"}))},W=()=>a({kind:"reopen",cardId:t.cardId}),X=()=>t.disabled===!0;xe(()=>{var s;(s=t.controllerRef)==null||s.call(t,{focus:o=>{const c=G(),f=h().find($=>S[$])??h()[0];f&&H(f,c,o)},send:()=>{P()},validate:()=>{const o=J(p),c=V(l(),o);return w(q(f=>{for(const $ of Object.keys(f))delete f[$];Object.assign(f,c.fieldErrors)})),c.valid?{valid:!0}:{valid:!1,errors:c.fieldErrors}},reset:()=>ue(),dismiss:()=>Q(),reopen:()=>W()})});const ce=E(()=>l()["x-kai-actions"]??[]),me=()=>l()["x-kai-submitLabel"]??"Submit",ge=()=>l()["x-kai-dismissible"]===!0,fe=E(()=>{const s=v.resolution();return!s||s.kind!=="submit"?[]:Or(l(),s.data??{})});return u(y,{get when(){return i().ok},get fallback(){return u(z,{get heading(){return t.heading},get errorMessage(){return i().message}})},get children(){return u(ye,{fallback:()=>(a({kind:"error",cardId:t.cardId,message:"The form failed to render."}),u(z,{get heading(){return t.heading},errorMessage:"The form failed to render."})),get children(){return u(y,{get when(){return!v.isDeferred()},get fallback(){return u(Ae,{type:"form",get title(){return t.heading??l().title},onReopen:W})},get children(){return u(z,{get heading(){return t.heading??l().title},get description(){return l().description},get actions(){return u(y,{get when(){return!v.isResolved()},fallback:void 0,get children(){var s=sr(),o=s.firstChild;return m(s,u(y,{get when(){return ge()},get children(){return u(N,{type:"button",variant:"ghost",onClick:Q,children:"Dismiss"})}}),o),m(o,u(C,{get each(){return ce()},children:c=>u(N,{type:"button",get variant(){return c.variant??"ghost"},onClick:()=>a({kind:"action",cardId:t.cardId,action:c.id}),get children(){return c.label}})}),null),m(o,u(N,{type:"submit",get form(){return le()},get disabled(){return X()},get children(){return me()}}),null),s}})},get children(){return u(y,{get when(){return!v.isResolved()},get fallback(){return u(Mr,{get rows(){return fe()},get optimistic(){return v.isOptimistic()}})},get children(){var s=ur();return s.addEventListener("submit",de),m(s,u(C,{get each(){return h()},children:o=>u(Z,{fieldKey:o,get field(){return l().properties[o]},get required(){return(l().required??[]).includes(o)},get inlineMax(){return d()},value:()=>p[o],error:()=>S[o],get disabled(){return X()},onInput:c=>se(o,c),onBlur:()=>oe(o)})})),k(o=>{var c=le(),f=O("flex flex-col gap-3",t.class);return c!==o.e&&j(s,"id",o.e=c),f!==o.t&&T(s,o.t=f),o},{e:void 0,t:void 0}),s}})}})}})}})}})}let Br=0;const qr=`kai-form-${++Br}`;function le(){return qr}function Mr(e){return(()=>{var r=or(),t=r.firstChild,n=t.firstChild,a=t.nextSibling;return m(t,u(Le,{size:16,"aria-hidden":"true"}),n),m(a,u(C,{get each(){return e.rows},children:i=>[(()=>{var l=dr();return m(l,()=>i.label),l})(),(()=>{var l=cr();return m(l,()=>i.value),l})()]})),k(()=>j(r,"role",e.optimistic?"status":void 0)),r})()}function Z(e){const r=`f-${e.fieldKey}-${Math.random().toString(36).slice(2,8)}`,t=`${r}-err`,n=`${r}-desc`,a=()=>e.field.title??Y(e.fieldKey),i=E(()=>wr(e.field,e.inlineMax)),l=()=>e.field["x-kai-placeholder"],d=()=>[e.field.description?n:"",e.error()?t:""].filter(Boolean).join(" ")||void 0,h=()=>({id:r,value:e.value(),field:e.field,disabled:e.disabled||e.field.readOnly===!0,placeholder:l(),required:e.required,invalid:!!e.error(),describedBy:d(),label:a(),onInput:e.onInput,onBlur:e.onBlur}),v=()=>["fieldset","repeater","checkbox-group","multiselect","radio","taglist"].includes(i());return(()=>{var p=hr();return m(p,u(y,{get when(){return!v()},get children(){var g=gr();return j(g,"for",r),m(g,a,null),m(g,u(y,{get when(){return e.required},get children(){return mr()}}),null),g}}),null),m(p,u(y,{get when(){return e.field.description},get children(){var g=fr();return j(g,"id",n),m(g,()=>e.field.description),g}}),null),m(p,u(Er,{get widget(){return i()},get common(){return h()},get fieldKey(){return e.fieldKey}}),null),m(p,u(y,{get when(){return e.error()},get children(){var g=pr();return j(g,"id",t),m(g,()=>e.error()),g}}),null),k(()=>j(p,"data-field",e.fieldKey)),p})()}function Er(e){const r=()=>e.widget,t=()=>e.common;return[u(y,{get when(){return r()==="text"||r()==="email"||r()==="url"||r()==="date"||r()==="datetime"||r()==="time"||r()==="password"},get children(){return u(He,x(t,{get variant(){return r()}}))}}),u(y,{get when(){return r()==="textarea"},get children(){return u(Pe,x(t))}}),u(y,{get when(){return r()==="number"},get children(){return u(Qe,x(t))}}),u(y,{get when(){return r()==="slider"},get children(){return u(We,x(t))}}),u(y,{get when(){return r()==="rating"},get children(){return u(Xe,x(t))}}),u(y,{get when(){return r()==="switch"},get children(){return u(er,x(t))}}),u(y,{get when(){return r()==="checkbox"},get children(){return u(rr,x(t))}}),u(y,{get when(){return r()==="radio"},get children(){return u(tr,x(t))}}),u(y,{get when(){return r()==="select"},get children(){return u(nr,x(t))}}),u(y,{get when(){return r()==="checkbox-group"},get children(){return u(ir,x(t))}}),u(y,{get when(){return r()==="multiselect"},get children(){return u(ar,x(t))}}),u(y,{get when(){return r()==="taglist"},get children(){return u(lr,x(t))}}),u(y,{get when(){return r()==="repeater"},get children(){return u(Rr,x(t,{inlineMax:U}))}}),u(y,{get when(){return r()==="fieldset"},get children(){return u(Nr,x(t,{inlineMax:U}))}}),u(y,{get when(){return r()==="unsupported"},get children(){var n=vr(),a=n.firstChild,i=a.nextSibling;return i.nextSibling,m(n,()=>e.fieldKey,i),n}})]}function Nr(e){const r=()=>e.field.properties??{},t=()=>e.value&&typeof e.value=="object"?e.value:{},n=(a,i)=>{e.onInput({...t(),[a]:i})};return(()=>{var a=br(),i=a.firstChild;return m(i,()=>e.label),m(a,u(C,{get each(){return Object.keys(r())},children:l=>u(Z,{fieldKey:l,get field(){return r()[l]},get required(){return(e.field.required??[]).includes(l)},get inlineMax(){return e.inlineMax},value:()=>t()[l],error:()=>{},get disabled(){return e.disabled},onInput:d=>n(l,d),get onBlur(){return e.onBlur}})}),null),a})()}function Rr(e){const r=()=>e.field.items??{type:"object",properties:{}},t=()=>Array.isArray(e.value)?e.value:[],n=d=>e.onInput(d),a=()=>n([...t(),{}]),i=d=>n(t().filter((h,v)=>v!==d)),l=(d,h,v)=>{const p=t().slice();p[d]={...p[d],[h]:v},n(p)};return(()=>{var d=xr(),h=d.firstChild;return m(h,()=>e.label),m(d,u(ke,{get each(){return t()},children:(v,p)=>(()=>{var g=yr(),S=g.firstChild,w=S.firstChild;return w.firstChild,m(w,p+1,null),m(S,u(N,{type:"button",size:"icon-sm",variant:"ghost","aria-label":`Remove row ${p+1}`,get disabled(){return e.disabled},onClick:()=>i(p),children:"\u2715"}),null),m(g,u(C,{get each(){return Object.keys(r().properties??{})},children:I=>u(Z,{fieldKey:I,get field(){return r().properties[I]},get required(){return(r().required??[]).includes(I)},get inlineMax(){return e.inlineMax},value:()=>{var M;return(M=v())==null?void 0:M[I]},error:()=>{},get disabled(){return e.disabled},onInput:M=>l(p,I,M),get onBlur(){return e.onBlur}})}),null),g})()}),null),m(d,u(N,{type:"button",variant:"outline",size:"sm",get disabled(){return e.disabled},onClick:a,children:"Add item"}),null),d})()}function Tr(e){return typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/["\\]/g,"\\$&")}we("kai-form",{data:void 0,cardId:void 0,heading:void 0,resolution:void 0,values:void 0,defaultValues:void 0,disabled:!1},(e,{element:r,dispatch:t,flag:n,expose:a})=>{let i;return a({focus:l=>i?.focus(l),send:()=>i?.send(),validate:()=>i?.validate()??{valid:!1},reset:()=>i?.reset(),dismiss:()=>i?.dismiss(),reopen:()=>i?.reopen()}),u(Lr,{get data(){return e.data},get cardId(){return e.cardId??(r.id||"kai-form")},get heading(){return e.heading},get resolution(){return e.resolution},get values(){return e.values},get defaultValues(){return e.defaultValues},get disabled(){return n("disabled")},onValuesChange:l=>t("kai-values-change",l),controllerRef:l=>i=l,hostElement:r})});