@tempots/beatui 0.0.2

package/dist/index.umd.js

@@ -0,0 +1,5 @@
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@tempots/dom"),require("@tempots/ui")):typeof define=="function"&&define.amd?define(["exports","@tempots/dom","@tempots/ui"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.BeatUIFramework={},c.TempoDom,c.TempoUI))})(this,function(c,e,v){"use strict";var un=Object.defineProperty;var Qe=c=>{throw TypeError(c)};var cn=(c,e,v)=>e in c?un(c,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):c[e]=v;var d=(c,e,v)=>cn(c,typeof e!="symbol"?e+"":e,v),on=(c,e,v)=>e.has(c)||Qe("Cannot "+v);var m=(c,e,v)=>(on(c,e,"read from private field"),v?v.call(c):e.get(c)),H=(c,e,v)=>e.has(c)?Qe("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(c):e.set(c,v);var D,_,j,N,P;class Ze{button({variant:r,size:t,color:n,roundedness:a}){const s=["bc-button",`bu-text-${t}`,`bc-control--padding-${t}`,`bc-control--rounded-${a}`];switch(r){case"filled":s.push(`bu-bg--${n}`),s.push(`hover:bu-bg--${n}`);break;case"light":s.push(`bu-bg--light-${n}`),s.push(`hover:bu-bg--light-${n}`);break;case"outline":s.push(`bu-border--${n}`),s.push(`hover:bu-bg--light-${n}`);break;case"default":s.push("bu-bg--light-neutral"),s.push(`bu-text--${n}`),s.push("hover:bu-bg--light-base");break;case"text":s.push("bu-bg--inherit"),s.push(`bu-text--${n}`),s.push("hover:bu-underline");break}return s.join(" ")}overlay({effect:r,mode:t}){return`bc-overlay bc-overlay--effect-${r} bc-overlay--mode-${t}`}icon({size:r,color:t}){const n=["bc-icon",`bc-icon--${r}`];return t&&n.push(`bu-fg--${t}`),n.join(" ")}panel({side:r,color:t,shadow:n}){return`bc-panel ${(Array.isArray(r)?r:[r]).map(s=>`bc-panel--side-${s}`).join(" ")} bu-bg--lighter-${t} bc-panel--shadow-${n}`}label(r){return`bc-label bc-label--${r.type}`}inputContainer({disabled:r,hasError:t}){const n=["bc-input-container"];return r?n.push("bc-input-container--disabled"):n.push("bc-input-container--default"),t&&n.push("bc-input-container--error"),n.join(" ")}controlInputWrapper(r){return["bc-control-input-wrapper"].join(" ")}controlInputWrapperLabelText({hasError:r,disabled:t}){const n=["bc-control-input-wrapper__label-text"];return r?n.push("bc-control-input-wrapper__label-text--error"):t?n.push("bc-control-input-wrapper__label-text--disabled"):n.push("bc-control-input-wrapper__label-text--default"),n.join(" ")}tag({disabled:r,color:t="base"}){const n=["bc-tag"];return r?n.push("bc-tag--disabled"):n.push(`bc-tag--${t}`),n.join(" ")}checkboxInput(r){return"bc-checkbox-input"}editableText(r){return"bc-editable-text"}numberInput(r){return"bc-number-input"}card({variant:r="default",size:t="md",roundedness:n="lg"}){const a=["bc-card"];return r!=="default"&&a.push(`bc-card--${r}`),t!=="md"&&a.push(`bc-card--padding-${t}`),n!=="lg"&&a.push(`bc-card--rounded-${n}`),a.join(" ")}center({gap:r="lg"}){const t=["bc-center"];return r!=="lg"&&t.push(`bc-center--gap-${r}`),t.join(" ")}sink({variant:r="default",size:t="md",roundedness:n="lg"}){const a=["bc-sink"];return r!=="default"&&a.push(`bc-sink--${r}`),t!=="md"&&a.push(`bc-sink--padding-${t}`),n!=="lg"&&a.push(`bc-sink--rounded-${n}`),a.join(" ")}segmentedControl({size:r="sm"}){const t=["bc-segmented-control"];return r!=="sm"&&t.push(`bc-segmented-control--size-${r}`),t.join(" ")}}const E={mark:e.makeProviderMark("Theme"),create:l=>{const r=new Ze,t=v.useAppearence(),n=e.localStorageProp({key:"beatui-appearance-preference",defaultValue:"system"}),a=()=>{t.dispose(),n.dispose()},s=e.computedOf(t,n)((i,p)=>p==="system"?i:p);return{value:{theme:r,appearance:s,appearancePreference:n,setAppearancePreference:i=>{n.set(i)}},dispose:a}}},et=()=>e.Use(E,({appearance:l})=>e.attr.class(l.map(r=>`b-${r}`)));function Y({type:l="button",disabled:r,variant:t="filled",size:n="md",color:a="base",roundedness:s="sm",onClick:u=()=>{}},...i){return e.Use(E,p=>e.html.button(e.attr.type(l),e.attr.disabled(r),e.attr.class(e.computedOf(p,t??"primary",n??"md",a,s)(({theme:o},h,f,g,y)=>o.button({variant:h,size:f,color:g,roundedness:y}))),e.on.click(u),...i))}const tt="bui-icons";function nt(){return new Promise((l,r)=>{const t=indexedDB.open(tt,1);t.onupgradeneeded=function(n){const a=n.target.result;a.objectStoreNames.contains("icons")||a.createObjectStore("icons")},t.onsuccess=function(){l(t.result)},t.onerror=function(){r(t.error)}})}const pe=nt();function lt(l,r){return new Promise(async(t,n)=>{const s=(await pe).transaction("icons","readwrite");s.objectStore("icons").put(r,l),s.oncomplete=t,s.onerror=n})}function rt(l){return new Promise(async(r,t)=>{const u=(await pe).transaction("icons","readonly").objectStore("icons").get(l);u.onsuccess=function(){r(u.result)},u.onerror=t})}async function at(l){const r=`https://api.iconify.design/${l}.svg`;return fetch(r).then(t=>{if(t.status===200)return t.text();throw new Error(`Failed to load icon: ${l}`)})}async function st(l){const r=l.replace(":","/"),t=await rt(r);if(t)return t;const n=await at(r);return await lt(r,n),n}function F({icon:l,size:r="md",color:t,title:n},...a){return e.Use(E,({theme:s})=>e.html.span(e.attr.class(e.computedOf(s,r,t)((u,i,p)=>u.icon({size:i,color:p}))),e.aria.label(n),v.WhenInViewport({once:!0},()=>v.Resource({request:l,load:({request:u})=>st(u),mapError:String})({success:u=>e.html.span(e.style.width("100%"),e.style.height("100%"),e.attr.innerHTML(u)),loading:()=>e.html.span(e.attr.class("animate-spin"),"↻"),failure:u=>e.html.span(e.attr.title(u),e.attr.class("text-red-500"),"🚫")})),...a))}const he=({disabled:l,value:r,color:t="base",onClose:n})=>{const a=e.Value.map(l??!1,u=>u),s=e.Value.map(t??"base",u=>u);return e.Use(E,u=>e.html.span(e.attr.class(e.computedOf(u,a,s)(({theme:i},p,o)=>i.tag({disabled:p,color:o}))),e.html.span(e.attr.class("bc-tag__text"),r),n!=null?e.html.button(e.attr.disabled(l),e.attr.class("bc-tag__close"),e.html.span("×"),e.on.click(()=>n==null?void 0:n(e.Value.get(r)))):e.Empty))},ut=(...l)=>e.Use(E,({theme:r})=>e.html.span(e.attr.class(r.label({type:"emphasis"})),...l)),fe=(...l)=>e.Use(E,({theme:r})=>e.html.span(e.attr.class(r.label({type:"default"})),...l)),be=(...l)=>e.Use(E,({theme:r})=>e.html.span(e.attr.class(r.label({type:"muted"})),...l)),ct=(...l)=>e.Use(E,({theme:r})=>e.html.span(e.attr.class(r.label({type:"error"})),...l)),ge=e.html.span(e.attr.class("bc-control-input-wrapper__required")," *"),w=({required:l,label:r,context:t,description:n,content:a,controller:s})=>e.Use(E,u=>e.html.div(e.attr.class(e.computedOf(u,s.hasError,s.disabled)(({theme:i},p,o)=>i.controlInputWrapper({hasError:p,disabled:o}))),r!=null||t!=null?e.html.div(e.attr.class("bc-control-input-wrapper__header"),e.html.label(e.attr.class("bc-control-input-wrapper__label"),e.attr.for(s.name),e.html.span(e.attr.class(e.computedOf(u,s.hasError,s.disabled)(({theme:i},p,o)=>i.controlInputWrapperLabelText({hasError:p,disabled:o}))),r),r!=null&&l?ge:e.Empty),t!=null?fe(t):e.Empty):e.Empty,e.html.div(e.attr.class("bc-control-input-wrapper__content"),a),n!=null?e.html.div(e.attr.class("bc-control-input-wrapper__description"),n):e.Empty,e.Ensure(s.error,i=>e.html.div(e.attr.class("bc-control-input-wrapper__error"),i)))),T=({child:l,disabled:r,input:t,before:n,after:a,hasError:s,focusableSelector:u="input, select, textarea",growInput:i=!0})=>{const p=e.Value.map(r??!1,o=>o);return e.Use(E,o=>e.html.div(l,e.WithElement(h=>{const f=()=>{const g=h.querySelector(u);g==null||g.focus()};return h.addEventListener("click",f),e.OnDispose(()=>h.removeEventListener("click",f))}),e.attr.class(e.computedOf(o,p,s??!1)(({theme:h},f,g)=>h.inputContainer({disabled:f,hasError:g}))),n!=null?e.html.span(e.attr.class("bc-input-container__before"),n):null,e.html.div(e.attr.class("bc-input-container__input"),e.attr.class(e.Value.map(i,h=>h?"bc-input-container__input--grow":"")),t),a!=null?e.html.span(e.attr.class("bc-input-container__after"),a):null))},$=({autocomplete:l,autofocus:r,class:t,disabled:n,name:a,placeholder:s,id:u})=>e.Fragment(e.attr.autocomplete(l),e.attr.autofocus(r),e.attr.class(t),e.attr.disabled(n),e.attr.name(a??u),e.attr.placeholder(s),e.attr.id(u)),I=l=>({id:l.name,disabled:l.disabled,value:l.value,hasError:l.hasError}),R=(l,r)=>({...I(l),value:l.value.map(r)}),J=l=>{const{value:r,onBlur:t,onChange:n}=l;return T({...l,input:e.input.date($(l),e.attr.valueAsDate(r),e.attr.class("bc-input"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValueAsDate(n)):e.Empty)})},ye=l=>{const{value:r,onBlur:t,onChange:n,onInput:a}=l;return T({...l,input:e.input.text($(l),e.attr.value(r),e.attr.class("bc-input"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValue(n)):e.Empty,a!=null?e.on.input(e.emitValue(a)):e.Empty)})},C=(l,r)=>()=>{r==null||r()},B=(l,r)=>t=>{l.change(t),r==null||r(t)},q=(l,r,t)=>n=>{const a=r(n);l.change(a),t==null||t(a)},it=(l,r,t)=>n=>{r(n)?(l.change(null),t==null||t(null)):(l.change(n),t==null||t(n))},ot=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:ye({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},pt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:J({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},ht=l=>{const r=l.getFullYear(),t=(l.getMonth()+1).toString().padStart(2,"0"),n=l.getDate().toString().padStart(2,"0"),a=l.getHours().toString().padStart(2,"0"),s=l.getMinutes().toString().padStart(2,"0");return`${r}-${t}-${n}T${a}:${s}`},de=l=>{const{value:r,onBlur:t,onChange:n}=l;return T({...l,input:e.input["datetime-local"]($(l),e.attr.value(e.Value.map(r,ht)),e.attr.class("bc-input"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValue(a=>n(new Date(a)))):e.Empty)})},ft=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:de({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},me=l=>{const r={name:"email",autocomplete:"email",placeholder:"you@company.com",...l},{value:t,onBlur:n,onChange:a,onInput:s}=r;return T({...l,input:e.input.email($(r),e.attr.value(t),e.attr.class("bc-input"),n!=null?e.on.blur(e.emitValue(n)):e.Empty,a!=null?e.on.change(e.emitValue(a)):e.Empty,s!=null?e.on.input(e.emitValue(s)):e.Empty)})},bt=l=>{const{onChange:r,onBlur:t,...n}=l;return w({label:"Email",...n,content:me({...n,...I(n.controller),onChange:B(n.controller,r),onBlur:C(n.controller,t)})})},gt={filling:{type:"filling"},submitting:{type:"submitting"},error:l=>({type:"error",error:l}),success:{type:"success"}},K="$$tts-exp-",ve=(l,r)=>e.WithElement(t=>{const n=`${K}${l}`;return e.OnDispose(e.Value.on(r,a=>Reflect.set(t,n,a)))}),yt=(l,r)=>{const t=`${K}${l}`;return n=>{r(Reflect.get(n.target,t))}},Ee=(l,r)=>{const t=`${K}${l}`;return n=>{const a=n.target,s=a.selectedIndex,u=a.options[s];r(Reflect.get(u,t))}},z={value:(l,r,t)=>({type:"value",value:l,label:r,disabled:t}),group:(l,r,t)=>({type:"group",group:l,options:r,disabled:t}),break:{type:"break"},getOptionValues:l=>l.flatMap(r=>r.type==="group"?z.getOptionValues(r.options):r.type==="break"?[]:[r.value]),contains:(l,r,t=(n,a)=>n===a)=>z.getOptionValues(l).some(n=>t(n,r))},we=(l,r,t)=>e.Ensure(l,n=>e.OneOfType(n,{value:a=>{const s=e.computedOf(a,t)((u,i)=>r(u.value,i));return e.html.option(e.OnDispose(s.dispose),e.attr.selected(s),ve("value",a.$.value),a.$.label)},group:a=>e.html.optgroup(e.attr.label(a.$.group),e.ForEach(a.$.options,s=>we(s,r,t))),break:()=>e.html.hr()})),Q=l=>{const{value:r,onBlur:t,onChange:n,options:a,unselectedLabel:s="Select one ...",equality:u=(p,o)=>p===o}=l;let i;return T({...l,child:e.on.click(()=>{i==null||i.focus(),typeof(i==null?void 0:i.showPicker)=="function"&&i.showPicker()}),input:e.html.select(e.WithElement(p=>{i=p;const o=new MutationObserver(h=>{const{removedNodes:f}=h[0];f.length>0&&(i.selectedIndex=0)});return o.observe(p,{childList:!0}),e.OnDispose(()=>o.disconnect())}),$(l),e.attr.class("focus:outline-none bg-transparent"),e.attr.class("w-full"),e.html.option(e.attr.hidden("hidden"),s),e.ForEach(a,p=>we(p,u,r)),t!=null?e.on.blur(t):e.Empty,n!=null?e.on.change(Ee("value",p=>n(p))):e.Empty)})},Ce=l=>v.Resource({request:l.request,load:l.load,mapError:String})({success:r=>{const t=r.map(n=>n.map(a=>typeof a=="object"&&"id"in a&&"label"in a?z.value(a.id,a.label):a));return Q({...l,options:t,unselectedLabel:l.unselectedLabel,equality:l.equality})},loading:()=>e.html.span(e.attr.class("animate-spin"),e.aria.label("Loading..."),"↻")}),dt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:Ce({...l,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},mt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:Q({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},Z=l=>{const{value:r,onBlur:t,onChange:n}=l;return T({...l,input:e.input.date($(l),e.attr.valueAsDate(r),e.attr.class("bc-input"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValueAsNullableDate(n)):e.Empty)})},vt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:Z({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},Et=l=>{const r=l.getFullYear(),t=l.getMonth()+1,n=l.getDate(),a=l.getHours(),s=l.getMinutes(),u=l.getSeconds();return`${r}-${t.toString().padStart(2,"0")}-${n.toString().padStart(2,"0")}T${a.toString().padStart(2,"0")}:${s.toString().padStart(2,"0")}:${u.toString().padStart(2,"0")}`},ee=l=>{const{value:r,onBlur:t,onChange:n}=l,a=e.Value.map(r,s=>s!=null?Et(s):null);return T({...l,input:e.input["datetime-local"]($(l),e.attr.value(e.Value.map(a,s=>s??null)),e.attr.class("bc-input"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValueAsNullableDateTime(n)):e.Empty)})},wt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:ee({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},Ct=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:Z({...n,...R(n.controller,a=>a!=null&&a!==""?new Date(a):null),onChange:q(n.controller,a=>a!=null?a.toISOString().split("T")[0]:null,t),onBlur:C(n.controller,r)})})},St=l=>new Date(l),Ot=l=>l.toISOString(),It=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:ee({...n,...R(n.controller,a=>a!=null&&a!==""?St(a):null),onChange:q(n.controller,a=>a!=null?Ot(a):null,t),onBlur:C(n.controller,r)})})},M=l=>typeof l=="string"&&l.trim()===""?null:l,te=l=>l??"",Se=l=>{const{value:r,onBlur:t,onChange:n,onInput:a,...s}=l;return T({...s,input:e.input.text($(s),e.attr.value(e.Value.map(r,te)),e.attr.class("bc-input"),t!=null?e.on.blur(t):e.Empty,n!=null?e.on.change(e.emitValue(u=>n(M(u)))):e.Empty,a!=null?e.on.input(e.emitValue(u=>a(M(u)))):e.Empty)})},Oe=l=>{const{value:r,onBlur:t,onChange:n,onInput:a,rows:s}=l;return T({...l,input:e.html.textarea($(l),e.attr.rows(s??10),e.attr.value(e.Value.map(r,te)),e.attr.class("bc-input"),t!=null?e.on.blur(t):e.Empty,n!=null?e.on.change(e.emitValue(u=>n(M(u)))):e.Empty,a!=null?e.on.input(e.emitValue(u=>a(M(u)))):e.Empty)})},Tt=l=>{const{onBlur:r,onChange:t,rows:n,...a}=l;return w({...a,content:Oe({...a,...I(a.controller),rows:n,onChange:B(a.controller,t),onBlur:C(a.controller,r)})})},$t=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:Se({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},Ie=l=>{const{value:r,step:t,min:n,max:a,onBlur:s,onChange:u,onInput:i,disabled:p}=l;return e.Use(E,o=>T({...l,input:e.input.number($(l),e.attr.valueAsNumber(r),e.attr.step(t),e.attr.min(n),e.attr.max(a),e.attr.class("bc-input"),e.attr.class(e.computedOf(o,p??!1)(({theme:h},f)=>h.numberInput({disabled:f}))),s!=null?e.on.blur(e.emitValue(s)):e.Empty,u!=null?e.on.change(e.emitValueAsNumber(u)):e.Empty,i!=null?e.on.input(e.emitValueAsNumber(i)):e.Empty)}))},Bt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:Ie({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},Te=l=>{const{value:r,onBlur:t,onChange:n,onInput:a,before:s,after:u,hasError:i,disabled:p,autocomplete:o,placeholder:h,...f}=l,g={name:"password",...f},y=e.prop(!0),O=e.computedOf(y,o)((V,W)=>V?W??"current-password":"off"),x=e.computedOf(y,h)((V,W)=>V?"•••••••••••••••":W??"secret password");return T({before:s,disabled:p,hasError:i,input:e.html.input($({...g,autocomplete:O,placeholder:x}),e.When(y,()=>e.Fragment(e.attr.type("password")),()=>e.Fragment(e.attr.type("text"))),e.attr.class("bc-input"),e.attr.value(r),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValue(n)):e.Empty,a!=null?e.on.input(e.emitValue(a)):e.Empty),after:u??e.html.button(e.attr.class("bc-input-container__password-toggle"),e.aria.label("Toggle password visibility"),e.on.click(()=>y.update(V=>!V)),e.When(y,()=>F({icon:"line-md--eye"}),()=>F({icon:"line-md--eye-off"})))})},kt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({label:"Password",...n,content:Te({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})};function xt(l,r){return l.length===r.length&&l.every((t,n)=>t===r[n])}function At({segments:l,activeSegment:r=null,onSegmentChange:t,size:n="sm"}){const a=e.Value.toSignal(r??null).deriveProp(),s=e.prop(l.map(()=>0),xt);return e.Use(E,u=>e.html.div(e.attr.class(e.computedOf(u,n)(({theme:i},p)=>i.segmentedControl({size:p}))),e.html.div(e.attr.class("bc-segmented-control__container"),e.html.div(e.attr.class("bc-segmented-control__indicator"),e.style.display(a.map(i=>i==null?"none":"block")),e.style.width(e.computed(()=>`${s.value[a.value??0]}px`,[a,s])),e.style.left(e.computed(()=>`${s.value.slice(0,a.value??0).reduce((p,o)=>p+o,0)}px`,[a,s]))),l.map(({label:i,onSelect:p},o)=>e.html.button(e.on.click(h=>{h.preventDefault(),a.set(o),t==null||t(o),p==null||p()}),e.attr.class("bc-segmented-control__segment"),e.attr.class(a.map(h=>h==null||h===o?"bc-segmented-control__segment--active":"bc-segmented-control__segment--inactive")),v.ElementRect(h=>(h.on(({width:f})=>{s.update(g=>{const y=[...g];return y[o]=f,y})}),i)))))))}const _t=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:J({...n,...R(n.controller,a=>new Date(a)),onChange:q(n.controller,a=>a.toISOString(),t),onBlur:C(n.controller,r)})})},$e=l=>{const{value:r,onChange:t,onBlur:n}=l,a=e.prop(""),s=i=>{t==null||t(e.Value.get(r).filter(p=>p!==i))},u=()=>{const i=a.value.trim(),p=e.Value.get(r);i===""||p.includes(i)||(a.set(""),t==null||t([...p,i]))};return T({...l,input:e.Fragment(e.attr.class("bc-input-container__tags"),e.ForEach(r,i=>he({value:i,onClose:()=>s(i.value)})),e.input.text($(l),e.attr.value(a),e.attr.class("bc-input bc-input-container__tags-input"),e.on.input(e.emitValue(a.set)),t!=null?e.on.change(u):e.Empty,n!=null?e.on.blur(n):e.Empty))})},Vt=l=>{const{onBlur:r,onChange:t,...n}=l;return w({...n,content:$e({...n,...I(n.controller),onChange:B(n.controller,t),onBlur:C(n.controller,r)})})},Be=l=>{const{value:r,onBlur:t,onChange:n,onInput:a,rows:s}=l;return T({...l,input:e.html.textarea($(l),e.attr.rows(s??10),e.attr.value(r),e.attr.class("bc-input"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitValue(n)):e.Empty,a!=null?e.on.input(e.emitValue(a)):e.Empty)})},Nt=l=>{const{onBlur:r,onChange:t,rows:n,...a}=l;return w({...a,content:Be({...a,...I(a.controller),rows:n,value:a.controller.value,onChange:B(a.controller,t),onBlur:C(a.controller,r)})})};function ne(l){return function(t){var a;if(t.type==="Valid")return t;const n=(a=t.dependencies)==null?void 0:a[l];return n!=null?{type:"Invalid",...n}:{type:"Valid"}}}function Dt(l){return l.split(".").map(t=>{const n=t.match(/^\[(\d+)\]$/);return n?Number(n[1]):t})}function ke(l){return typeof l=="number"?`[${l}]`:`.${l}`}function xe(l){if(l.length===0)return"";const[r,...t]=l;return[typeof r=="number"?`[${r}]`:r,...t.map(ke)].join("")}class L{constructor(r,t,n,a,s){d(this,"path");d(this,"change");d(this,"value");d(this,"status");d(this,"error");d(this,"hasError");d(this,"dependencyErrors");H(this,D,{disabled:e.prop(!1)});d(this,"parent");d(this,"disabled");d(this,"disable",()=>{m(this,D).disabled.set(!0)});d(this,"enable",()=>{m(this,D).disabled.set(!1)});this.path=r,this.change=t,this.value=n,this.status=a,this.error=a.map(u=>u.type==="Invalid"?u.error:void 0),this.hasError=a.map(u=>u.type==="Invalid"),this.dependencyErrors=a.map(u=>u.type==="Invalid"?u.dependencies:void 0),this.parent=s,this.disabled=e.computedOf(m(this,D).disabled,s.disabled)((u,i)=>u||i)}get name(){return xe(this.path)}dispose(){m(this,D).disabled.dispose()}}D=new WeakMap;const ie=class ie extends L{constructor(t,n,a,s,u){super(t,n,a.map(i=>i??[]),s,u);H(this,_,new Array);H(this,j,(t,n)=>{if(m(this,_)[t])return m(this,_)[t];const a=async u=>{const i=this.value.value.slice();i[t]=u,this.change(i)},s=n([...this.path,t],a,this.value.map(u=>u[t]),this.status.map(ne(t)),{disabled:this.disabled});return m(this,_)[t]=s,s});d(this,"length",this.value.map(t=>t.length));d(this,"item",t=>m(this,j).call(this,t,(n,a,s,u,i)=>new L(n,a,s,u,i)));d(this,"list",t=>m(this,j).call(this,t,(n,a,s,u,i)=>new ie(n,a,s,u,i)));d(this,"group",t=>m(this,j).call(this,t,(n,a,s,u,i)=>new U(n,a,s,u,i)));d(this,"push",(...t)=>{this.change([...this.value.value,...t])});d(this,"pop",()=>{this.splice(this.value.value.length-1,1)});d(this,"shift",()=>{this.splice(0,1)});d(this,"unshift",(...t)=>{this.change([...t,...this.value.value])});d(this,"removeAt",t=>{this.splice(t,1)});d(this,"splice",(t,n)=>{const a=m(this,_).splice(t,n);for(const u of a)u.dispose();const s=this.value.value.slice();s.splice(t,n),this.change(s)})}dispose(){super.dispose();for(const t of m(this,_))t.dispose();m(this,_).length=0}};_=new WeakMap,j=new WeakMap;let G=ie;const oe=class oe extends L{constructor(t,n,a,s,u){super(t,n,a.map(i=>i??{}),s,u);H(this,N,new Map);H(this,P,(t,n)=>{if(m(this,N).has(t))return m(this,N).get(t);const a=async u=>{this.change({...this.value.value,[t]:u})},s=n([...this.path,t],a,this.value.map(u=>u[t]),this.status.map(ne(t)),{disabled:this.disabled});return m(this,N).set(t,s),s});d(this,"field",t=>m(this,P).call(this,t,(n,a,s,u,i)=>new L(n,a,s,u,i)));d(this,"list",t=>m(this,P).call(this,t,(n,a,s,u,i)=>new G(n,a,s,u,i)));d(this,"group",t=>m(this,P).call(this,t,(n,a,s,u,i)=>new oe(n,a,s,u,i)))}dispose(){super.dispose();for(const t of m(this,N).values())t.dispose();m(this,N).clear()}};N=new WeakMap,P=new WeakMap;let U=oe;class Ae extends U{dispose(){super.dispose(),this.parent.disabled.dispose(),this.value.dispose(),this.status.dispose()}}const Wt=l=>{const{value:r,onBlur:t,onChange:n,placeholder:a,disabled:s}=l;return e.Use(E,u=>T({growInput:!1,...l,input:e.html.span(e.attr.class(e.computedOf(u,s??!1)(({theme:i},p)=>i.checkboxInput({disabled:p}))),e.input.checkbox($(l),e.attr.checked(r),e.attr.class("bc-checkbox-input__checkbox"),t!=null?e.on.blur(e.emitValue(t)):e.Empty,n!=null?e.on.change(e.emitChecked(n)):e.Empty),a!=null?e.html.span(e.attr.class("bc-checkbox-input__label"),be(a)):e.Empty)}))},Ft=({startEditing:l,value:r,onChange:t,placeholder:n})=>{const a=e.Value.deriveProp(l??!1),s=e.prop(!1);return e.Use(E,u=>e.html.div(e.attr.class(e.computedOf(u,a)(({theme:i},p)=>i.editableText({isEditing:p}))),e.When(a,()=>e.html.input(e.attr.placeholder(n),e.attr.value(r),e.attr.class("bc-editable-text__input"),v.AutoSelect(),e.on.keydown(i=>{i.key==="Enter"?a.set(!1):i.key==="Escape"&&(s.set(!0),a.set(!1))}),e.on.blur(e.emitValue(i=>{if(a.set(!1),s.value){s.set(!1);return}t(i)}))),()=>e.html.span(e.on.click(()=>a.set(!0)),e.attr.class("bc-editable-text__display"),e.When(e.Value.map(r,i=>i!=null&&i.trim()!==""),()=>e.html.span(e.attr.class("bc-editable-text__text"),r),()=>e.html.span(e.attr.class("bc-editable-text__placeholder"),n)),e.html.button(e.attr.class("bc-editable-text__edit-button"),e.aria.label("Edit"),e.on.click(()=>a.set(!0)),F({icon:"line-md/pencil"}))))))};function _e(l){function r(t){return typeof t=="number"?t:t.toString()}return l.map(t=>typeof t=="object"&&t.key!=null?r(t.key):r(t))}function Ve(l){const r=l.filter(a=>a.path==null||a.path.length===0).map(a=>a.message),t=l.filter(a=>a.path!=null&&a.path.length>0).reduce((a,s)=>{const u=_e(s.path),i=u.pop();let p=a;for(const o of u)p.dependencies==null&&(p.dependencies={}),p.dependencies[o]==null&&(p.dependencies[o]={}),p=p.dependencies[o];return p.dependencies==null&&(p.dependencies={}),p.dependencies[i]={error:s.message},a},{}),n=r.join(`
+`);return{...t,error:n!=""?n:void 0}}function le(l){return e.Fragment(e.attr.disabled(l.disabled),e.attr.name(l.name))}function jt(l,{triggerOn:r="change"}={}){return e.Fragment(le(l),e.attr.value(l.value),(r==="input"?e.on.input:e.on.change)(e.emitValue(l.change)))}function Pt(l,{triggerOn:r="change"}={}){return e.Fragment(le(l),e.attr.valueAsNumber(l.value),(r==="input"?e.on.input:e.on.change)(e.emitValueAsNumber(l.change)))}function Ht({defaultValue:l={},schema:r}){const t=e.prop(l),n=e.prop({type:"Valid"}),a=e.prop(!1),s=async i=>{t.set(i);const p=await r["~standard"].validate(i);p.issues!=null?n.set({type:"Invalid",...Ve(p.issues)}):n.set({type:"Valid"})};return new Ae([],s,t,n,{disabled:a})}const Mt=["!=","<=",">=","<",">","="];function Lt(l){for(const r of Mt)if(typeof l=="string"&&l.startsWith(r))return[r,l.slice(r.length)];return["=",l]}function Ne(l,r,t){const[n,a]=Lt(r),s=l.findIndex(p=>p[1]===a);if(s===-1)throw new Error(`Breakpoint ${String(a)} not found`);const u=l[s][0],i=s<l.length-1?l[s+1][0]:1/0;switch(n){case"=":return t>=u&&t<i;case"!=":return!(t>=u&&t<i);case"<=":return t<=u;case">=":return t>=u;case"<":return t<u;case">":return t>u;default:return!1}}function Ut(l,r){const t=l.findIndex(n=>n[0]>r)-1;return t>=0?l[t][1]:(l.length>0&&r>=l[0][0],l[0][1])}function re(l,{breakpoints:r,mode:t="viewport"}){const a=[...Object.entries(r).map(([u,i])=>[i,u])].sort((u,i)=>u[0]-i[0]),s=u=>{const i=u.map(({width:o})=>{const h=a.findIndex(f=>f[0]>o)-1;return h>=0?{width:o,breakpoint:a[h][1]}:a.length>0&&o>=a[0][0]?{width:o,breakpoint:a[0][1]}:{width:o,breakpoint:a[0][1]}});return l({value:i,breakpoints:r,asList:a,is:(o,h)=>Ne(a,o,h)})};return t==="element"?v.ElementRect(s):v.WindowSize(s)}let ae=NaN;function Rt(l,r){return l?(isNaN(ae)&&(ae=parseFloat(getComputedStyle(document.documentElement).fontSize)),parseFloat(l)*ae):r}function S(l,r,t){return Rt(l.getPropertyValue(r),t)}function De(l){return e.WithElement(r=>{const t=getComputedStyle(r),n={zero:0,xs:S(t,"--breakpoint-xs",640),sm:S(t,"--breakpoint-sm",768),md:S(t,"--breakpoint-md",1024),lg:S(t,"--breakpoint-lg",1280),xl:S(t,"--breakpoint-xl",1536)};return re(l,{breakpoints:n})})}function qt(l){return e.WithElement(r=>{const t=getComputedStyle(r),n={zero:0,"3xs":S(t,"--container-3xs",256),"2xs":S(t,"--container-2xs",288),xs:S(t,"--container-xs",320),sm:S(t,"--container-sm",384),md:S(t,"--container-md",448),lg:S(t,"--container-lg",512),xl:S(t,"--container-xl",640),"2xl":S(t,"--container-2xl",768),"3xl":S(t,"--container-3xl",1024),"4xl":S(t,"--container-4xl",1280),"5xl":S(t,"--container-5xl",1536),"6xl":S(t,"--container-6xl",2048)};return re(l,{breakpoints:n,mode:"element"})})}const se=(l,r)=>{const t=setTimeout(l,r);return()=>clearTimeout(t)};function zt({initialStatus:l="closed",openedAfter:r,closedAfter:t}){const n=e.prop(l),a=()=>{n.set("start-opening")},s=()=>{n.set("closing")},u=()=>{n.value==="open"||n.value==="opening"?s():a()},i=g=>{g?a():s()},p=g=>n.on(y=>{y==="closed"&&g()});let o=()=>{};n.on(g=>{o(),g==="start-opening"&&(o=se(()=>n.set("opening"),0)),g==="opening"&&(o=r(()=>n.set("open"))),g==="closing"&&(o=t(()=>n.set("closed")))}),n.onDispose(()=>o());const h=n.map(g=>g!=="closed"),f=n.map(g=>g==="open"||g==="opening");return{status:n,open:a,close:s,toggle:u,setOpen:i,isOpen:h,displayOpen:f,dispose:()=>n.dispose(),onClosed:p}}function We(l,r){function t(){if(l.getAnimations().length===0){r();return}l.addEventListener("transitionend",t,{once:!0})}const n=se(t,10);return()=>{n(),l.removeEventListener("transitionend",t)}}function ue({initialStatus:l="closed",element:r}={}){let t=r;return{setElement:n=>{t=n},...zt({initialStatus:l,openedAfter:n=>t==null?(n(),()=>{}):We(t,n),closedAfter:n=>t==null?(n(),()=>{}):We(t,n)})}}const A={banner:{zero:32,xs:32,sm:32,md:32,lg:32,xl:32},header:{zero:60,xs:60,sm:60,md:60,lg:60,xl:60},mainHeader:{zero:48,xs:48,sm:48,md:48,lg:48,xl:48},mainFooter:{zero:48,xs:48,sm:48,md:48,lg:48,xl:48},footer:{zero:48,xs:48,sm:48,md:48,lg:48,xl:48},menu:{zero:300,xs:300,sm:300,md:300,lg:300,xl:300},aside:{zero:280,xs:280,sm:280,md:280,lg:280,xl:280}};function Fe(l,r){if(typeof l=="number")return{zero:l,xs:l,sm:l,md:l,lg:l,xl:l};const t={zero:l.zero??r.zero,xs:l.xs??r.xs,sm:l.sm??r.sm,md:l.md??r.md,lg:l.lg??r.lg,xl:l.xl??r.xl};return t.xs<t.zero&&(t.xs=t.zero),t.sm<t.xs&&(t.sm=t.xs),t.md<t.sm&&(t.md=t.sm),t.lg<t.md&&(t.lg=t.md),t.xl<t.lg&&(t.xl=t.lg),t}function ce(l){l=l.filter(r=>r.some(t=>t!=null&&!t.startsWith("?")));for(let r=0;r<l[0].length;r++)l.every(t=>t[r]==null||t[r].startsWith("?"))&&(l=l.map(t=>t.filter((n,a)=>a!==r)),r--);return l=l.map(r=>r.map(t=>t!=null&&t.startsWith("?")?t.slice(1):t)),l}function Gt({smallBreakpoint:l,mediumBreakpoint:r,vertical:t,horizontal:n,is:a}){function s(p){var y;let o=[[null],[null],[null],[null],[null],[null]];const h=[];h.push("1fr");const f=[];return n.banner&&(f.push(n.banner[p]+"px"),o[0][1]="banner"),(n.header||t.menu||t.aside)&&(f.push((((y=n.header)==null?void 0:y[p])??A.header[p])+"px"),o[1][1]="header"),n.mainHeader&&(f.push(n.mainHeader[p]+"px"),o[2][1]="mainHeader"),f.push("1fr"),o[3][1]="main",n.mainFooter&&(f.push(n.mainFooter[p]+"px"),o[4][1]="mainFooter"),n.footer&&(f.push(n.footer[p]+"px"),o[5][1]="footer"),o=ce(o),{columns:h.join(" "),rows:f.join(" "),areas:o.map(O=>`"${O.join(" ")}"`).join(`
+`),displayMenu:!1,displayAside:!1,menuWidth:A.menu[p]+"px",asideWidth:A.aside[p]+"px"}}function u(p){var y;let o=[[null,null],[null,null],[null,null],[null,null],[null,null],[null,null]];const h=[];t.menu&&(h.push(t.menu[p]+"px"),o[2][0]="?menu",o[3][0]="menu",o[4][0]="?menu"),h.push("1fr");const f=[];return n.banner&&(f.push(n.banner[p]+"px"),o[0][0]="?banner",o[0][1]="banner"),(n.header||t.aside)&&(f.push((((y=n.header)==null?void 0:y[p])??A.header[p])+"px"),o[1][0]="?header",o[1][1]="header"),n.mainHeader&&(f.push(n.mainHeader[p]+"px"),o[2][1]="mainHeader"),f.push("1fr"),o[3][1]="main",n.mainFooter&&(f.push(n.mainFooter[p]+"px"),o[4][1]="mainFooter"),n.footer&&(f.push(n.footer[p]+"px"),o[5][0]="?footer",o[5][1]="footer"),o=ce(o),{columns:h.join(" "),rows:f.join(" "),areas:o.map(O=>`"${O.join(" ")}"`).join(`
+`),displayMenu:!0,displayAside:!1,menuWidth:A.menu[p]+"px",asideWidth:A.aside[p]+"px"}}function i(p){let o=[[null,null,null],[null,null,null],[null,null,null],[null,null,null],[null,null,null],[null,null,null]];const h=[];t.menu&&(h.push(t.menu[p]+"px"),o[2][0]="?menu",o[3][0]="menu",o[4][0]="?menu"),h.push("1fr"),t.aside&&(h.push(t.aside[p]+"px"),o[2][2]="?aside",o[3][2]="aside",o[4][2]="?aside");const f=[];return n.banner&&(f.push(n.banner[p]+"px"),o[0][0]="?banner",o[0][1]="banner",o[0][2]="?banner"),n.header&&(f.push(n.header[p]+"px"),o[1][0]="?header",o[1][1]="header",o[1][2]="?header"),n.mainHeader&&(f.push(n.mainHeader[p]+"px"),o[2][1]="mainHeader"),f.push("1fr"),o[3][1]="main",n.mainFooter&&(f.push(n.mainFooter[p]+"px"),o[4][1]="mainFooter"),n.footer&&(f.push(n.footer[p]+"px"),o[5][0]="?footer",o[5][1]="footer",o[5][2]="?footer"),o=ce(o),{columns:h.join(" "),rows:f.join(" "),areas:o.map(y=>`"${y.join(" ")}"`).join(`
+`),displayMenu:!0,displayAside:!0,menuWidth:A.menu[p]+"px",asideWidth:A.aside[p]+"px"}}return({width:p,breakpoint:o})=>a(`<=${l}`,p)?s(o):a(`<=${r}`,p)?u(o):i(o)}const Xt=["menu","aside"],Yt=["banner","header","mainHeader","mainFooter","footer"];function Jt(l,{displayMenu:r},t){return l?r?"block":t?"float":"none":"none"}function Kt(l,{displayAside:r},t){return l?r?"block":t?"float":"none":"none"}function Qt({smallBreakpoint:l="sm",mediumBreakpoint:r="md",...t}){return e.Use(E,({theme:n})=>{const a=Object.fromEntries(Xt.filter(u=>t[u]).map(u=>[u,Fe(t[u].width??{},A[u])])),s=Object.fromEntries(Yt.filter(u=>t[u]).map(u=>[u,Fe(t[u].height??{},A[u])]));return De(({value:u,is:i})=>{var He,Me,Le,Ue,Re,qe,ze,Ge,Xe,Ye;const p=Gt({smallBreakpoint:l,mediumBreakpoint:r,vertical:a,horizontal:s,is:i}),o=u.map(p),h=e.computedOf(s.header!=null,a.menu!=null,a.aside!=null)((b,k,X)=>b||k||X),f=e.computedOf(a.aside!=null,o)((b,{displayAside:k})=>b&&!k),g=e.computedOf(a.menu!=null,o)((b,{displayMenu:k})=>b&&!k),y=ue(),O=ue(),x=e.prop(0),V=e.computedOf(a.menu!=null,o,y.isOpen)(Jt),W=e.computedOf(a.aside!=null,o,O.isOpen)(Kt);return e.html.div(e.OnDispose(()=>{x.dispose(),y.dispose(),O.dispose()}),e.style.height("100%"),e.style.display("grid"),e.style.gridTemplateColumns(o.$.columns),e.style.gridTemplateRows(o.$.rows),e.style.gridTemplateAreas(o.$.areas),e.style.gridColumnGap("0"),e.style.gridRowGap("0"),t.banner?e.html.header(e.attr.class(n.panel({side:"none",color:t.banner.color??"white",shadow:t.banner.shadow??"none"})),e.style.height("100%"),e.style.gridArea("banner"),t.banner.content):null,e.html.header(e.attr.class(n.panel({side:"bottom",color:((He=t.header)==null?void 0:He.color)??"white",shadow:((Me=t.header)==null?void 0:Me.shadow)??"none"})),e.attr.class("bu-z-10"),e.style.display(h.map(b=>b?"block":"none")),e.style.gridArea("header"),v.ElementRect(b=>(b.$.bottom.feedProp(x),null)),e.html.div(e.style.display("flex"),e.style.height("100%"),e.html.div(e.style.display(g.map(b=>b?"flex":"none")),e.style.alignItems("center"),e.style.justifyContent("center"),e.style.height("100%"),e.style.width("60px"),Y({onClick:()=>y.toggle(),variant:"light",color:"base"},e.aria.label("Open menu"),F({icon:y.isOpen.map(b=>b?"line-md/menu-to-close-alt-transition":"line-md/close-to-menu-alt-transition")}))),e.html.div(e.style.height("100%"),e.style.flexGrow("1"),(Le=t.header)==null?void 0:Le.content),e.html.div(e.style.alignItems("center"),e.style.justifyContent("center"),e.style.height("100%"),e.style.width("60px"),e.style.display(f.map(b=>b?"flex":"none")),Y({onClick:()=>O.toggle(),roundedness:"full",variant:"light",color:"base"},e.aria.label("Open aside"),F({icon:"line-md/chevron-left"},e.attr.class("bu-transition-transform"),e.attr.class(O.isOpen.map(b=>b?"bu-rotate-180":""))))))),t.menu?e.html.nav(e.WithElement(b=>{y.setElement(b)}),e.attr.class(V.map(b=>{var k,X,Je,Ke;return b==="float"?n.panel({side:"right",color:((k=t.menu)==null?void 0:k.color)??"white",shadow:((X=t.menu)==null?void 0:X.shadow)??"md"}):n.panel({side:"right",color:((Je=t.menu)==null?void 0:Je.color)??"white",shadow:((Ke=t.menu)==null?void 0:Ke.shadow)??"none"})})),e.style.height("100%"),e.style.gridArea("menu"),e.style.display(V.map(b=>b==="none"?"none":"block")),e.style.position(V.map(b=>b==="float"?"fixed":"initial")),e.style.top(x.map(b=>`${b}px`)),e.style.transition("left 0.3s ease-in-out"),e.style.left(e.computedOf(y.displayOpen,o.$.menuWidth)((b,k)=>b?"0":`-${k}`)),e.style.width(o.$.menuWidth),e.style.bottom(x.map(b=>`${b}px`)),e.dataAttr.status(y.status.map(String)),(Ue=t.menu)==null?void 0:Ue.content):null,t.mainHeader?e.html.header(e.style.height("100%"),e.style.gridArea("mainHeader"),e.attr.class(n.panel({side:"none",color:((Re=t.mainHeader)==null?void 0:Re.color)??"white",shadow:((qe=t.mainHeader)==null?void 0:qe.shadow)??"none"})),t.mainHeader.content):null,e.html.main(e.style.height("100%"),e.style.overflow("hidden"),e.style.gridArea("main"),e.attr.class(n.panel({side:"none",color:((ze=t.main)==null?void 0:ze.color)??"white",shadow:((Ge=t.main)==null?void 0:Ge.shadow)??"none"})),t.main.content),t.mainFooter?e.html.footer(e.style.height("100%"),e.style.gridArea("mainFooter"),e.attr.class(n.panel({side:"none",color:((Xe=t.mainFooter)==null?void 0:Xe.color)??"white",shadow:((Ye=t.mainFooter)==null?void 0:Ye.shadow)??"none"})),t.mainFooter.content):null,t.aside?e.html.aside(e.WithElement(b=>{O.setElement(b)}),e.attr.class(W.map(b=>b==="float"?n.panel({side:"left",color:"white",shadow:"md"}):n.panel({side:"left",color:"white",shadow:"none"}))),e.style.height("100%"),e.style.gridArea("aside"),e.style.display(W.map(b=>b==="none"?"none":"block")),e.style.position(W.map(b=>b==="float"?"fixed":"initial")),e.style.top(x.map(b=>`${b}px`)),e.style.transition("right 0.3s ease-in-out"),e.style.right(e.computedOf(O.displayOpen,o.$.asideWidth)((b,k)=>b?"0":`-${k}`)),e.style.width(o.$.menuWidth),e.style.bottom(x.map(b=>`${b}px`)),t.aside.content):null,t.footer?e.html.footer(e.attr.class(n.panel({side:"top",color:"white",shadow:"none"})),e.style.height("100%"),e.style.gridArea("footer"),t.footer.content):null)})})}function Zt({variant:l="default",size:r="md",roundedness:t="lg"}={},...n){return e.Use(E,a=>e.html.div(e.attr.class(e.computedOf(a,l,r,t)(({theme:s},u,i,p)=>s.card({variant:u,size:i,roundedness:p}))),...n))}function en(...l){return e.html.div(e.attr.class("bc-center-h"),e.html.div(e.attr.class("bc-center__content"),...l))}function tn({gap:l="lg"}={},...r){return e.Use(E,t=>e.html.div(e.attr.class(e.computedOf(t,l)(({theme:n},a)=>n.center({gap:a}))),...r))}function nn(...l){return e.html.div(e.attr.class("bc-group"),...l)}function ln({variant:l="default",size:r="md",roundedness:t="lg"}={},...n){return e.Use(E,a=>e.html.div(e.attr.class(e.computedOf(a,l,r,t)(({theme:s},u,i,p)=>s.sink({variant:u,size:i,roundedness:p}))),...n))}function rn(...l){return e.html.div(e.attr.class("bc-stack"),...l)}function je(l){return({effect:r,...t},n)=>{const a=[],s=()=>a.forEach(o=>o()),u=ue();u.onClosed(s);const i=()=>{var h,f;const o=new Set;for(const g of l.element.querySelectorAll(":scope > :not([data-overlay])"))g.hasAttribute("inert")?o.add(g):g.setAttribute("inert","");if(a.push(()=>{for(const g of l.element.querySelectorAll(":scope > :not([data-overlay])"))o.has(g)||g.removeAttribute("inert");o.clear()}),(f=(h=document.activeElement)==null?void 0:h.blur)==null||f.call(h),t.mode==="capturing"){const g=O=>{var x;O.key==="Escape"&&((x=t.onEscape)==null||x.call(t),u.close())};document.addEventListener("keydown",g),a.push(()=>document.removeEventListener("keydown",g));const y=()=>{var O;(O=t.onClickOutside)==null||O.call(t),u.close()};l.element.addEventListener("mousedown",y),a.push(()=>l.element.removeEventListener("mousedown",y))}return e.html.div(e.WithElement(g=>u.setElement(g)),e.dataAttr.status(u.status.map(String)),e.dataAttr.overlay("true"),e.Use(E,({theme:g})=>e.attr.class(g.overlay({effect:r??"visible",mode:t.mode??"capturing"}))),n(u.close))},p=e.render(i(),l.element,{disposeWithParent:!0,clear:!1,providers:l.providers});return a.push(p),se(()=>u.open(),0),s}}function Pe(l,r,t){return e.WithBrowserCtx(n=>{const a=l(n),s=je(a);let u=()=>{};const i=p=>{u(),u=s(r,p)};return e.Fragment(e.OnDispose(u),t(i))})}function an(l,r){return Pe(t=>t,l,r)}function sn(l,r){return Pe(t=>t.makePortal("body"),l,r)}Object.defineProperty(c,"Use",{enumerable:!0,get:()=>e.Use}),c.AppShell=Qt,c.Button=Y,c.Card=Zt,c.Center=tn,c.CenterH=en,c.CheckboxInput=Wt,c.CommonInputAttributes=$,c.ControlInputWrapper=w,c.DateControl=pt,c.DateInput=J,c.DateTimeControl=ft,c.DateTimeInput=de,c.EditableText=Ft,c.EmailControl=bt,c.EmailInput=me,c.EmphasisLabel=ut,c.ErrorLabel=ct,c.Expando=ve,c.FormController=Ae,c.FormStatus=gt,c.Group=nn,c.GroupController=U,c.Icon=F,c.InputContainer=T,c.Label=fe,c.LazyNativeSelect=Ce,c.LazyNativeSelectControl=dt,c.ListController=G,c.MutedLabel=be,c.NativeSelect=Q,c.NativeSelectControl=mt,c.NullableDateControl=vt,c.NullableDateInput=Z,c.NullableDateTimeControl=wt,c.NullableDateTimeInput=ee,c.NullableStringDateControl=Ct,c.NullableStringDateTimeControl=It,c.NullableTextArea=Oe,c.NullableTextAreaControl=Tt,c.NullableTextControl=$t,c.NullableTextInput=Se,c.NumberControl=Bt,c.NumberInput=Ie,c.OverlayBody=sn,c.OverlayElement=an,c.PasswordControl=kt,c.PasswordInput=Te,c.RequiredSymbol=ge,c.SegmentedControl=At,c.SelectOption=z,c.Sink=ln,c.Stack=rn,c.StringDateControl=_t,c.Tag=he,c.TagsControl=Vt,c.TagsInput=$e,c.TextArea=Be,c.TextAreaControl=Nt,c.TextControl=ot,c.TextInput=ye,c.Theme=E,c.ThemeAppeareance=et,c.ValueController=L,c.WithBreakpoint=re,c.WithTWBreakpoint=De,c.WithTWElementBreakpoint=qt,c.compareBreakpoint=Ne,c.connectCommonAttributes=le,c.connectNumberInput=Pt,c.connectStringInput=jt,c.convertStandardSchemaIssues=Ve,c.convertStandardSchemaPathToPath=_e,c.emitExpando=yt,c.emitOptionExpando=Ee,c.emptyToNull=M,c.findBreakpoint=Ut,c.inputOptionsFromController=I,c.inputOptionsFromMappedController=R,c.makeMapValidationResult=ne,c.makeMappedOnChangeHandler=q,c.makeNullableOnChangeHandler=it,c.makeOnBlurHandler=C,c.makeOnChangeHandler=B,c.makeOverlay=je,c.nullToEmpty=te,c.parsePath=Dt,c.pathToString=xe,c.useForm=Ht,c.wrapSegment=ke,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,14 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize, ButtonVariant } from '../theme';
+import { ThemeColorName } from '@/tokens';
+import { RadiusName } from '@/tokens/radius';
+export interface ButtonOptions {
+    type?: Value<'submit' | 'reset' | 'button'>;
+    disabled?: Value<boolean>;
+    variant?: Value<ButtonVariant>;
+    size?: Value<ControlSize>;
+    color?: Value<ThemeColorName>;
+    roundedness?: Value<RadiusName>;
+    onClick?: () => void;
+}
+export declare function Button({ type, disabled, variant, size, color, roundedness, onClick, }: ButtonOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/dist/types/components/data/icon.d.ts

@@ -0,0 +1,9 @@
+import { TNode, Value } from '@tempots/dom';
+import { IconSize } from '../theme';
+export interface IconOptions {
+    icon: Value<string>;
+    size?: Value<IconSize>;
+    color?: Value<string>;
+    title?: Value<string>;
+}
+export declare function Icon({ icon, size, color, title }: IconOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/data/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon';
+export * from './tag';

package/dist/types/components/data/tag.d.ts

@@ -0,0 +1,8 @@
+import { Value } from '@tempots/dom';
+import { ThemeColorName } from '@/tokens';
+export declare const Tag: ({ disabled, value, color, onClose, }: {
+    value: Value<string>;
+    disabled?: Value<boolean>;
+    color?: Value<ThemeColorName>;
+    onClose?: (value: string) => void;
+}) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/control-input-wrapper.d.ts

@@ -0,0 +1,8 @@
+import { TNode } from '@tempots/dom';
+import { Merge } from '@tempots/std';
+import { ControlWrapperOptions } from './control-options';
+export declare const RequiredSymbol: import("@tempots/dom").Renderable;
+export type ControlInputWrapperOptions<S> = Merge<ControlWrapperOptions<S>, {
+    content: TNode;
+}>;
+export declare const ControlInputWrapper: <S>({ required, label, context, description, content, controller, }: ControlInputWrapperOptions<S>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/control-options.d.ts

@@ -0,0 +1,19 @@
+import { TNode, Value } from '@tempots/dom';
+import { Merge } from '@tempots/std';
+import { ValueController } from '../controller/value-controller';
+export type ControlWrapperOptions<S> = {
+    controller: ValueController<S>;
+    required?: Value<boolean>;
+    label?: TNode;
+    context?: TNode;
+    description?: TNode;
+};
+export type ControlOptions<S> = Merge<ControlWrapperOptions<S>, {
+    onBlur?: () => void;
+    onChange?: (value: S) => void;
+    placeholder?: Value<string>;
+    autofocus?: Value<boolean>;
+    name?: Value<string>;
+    autocomplete?: Value<string>;
+    class?: Value<string>;
+}>;

package/dist/types/components/form/control/date-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const DateControl: (options: ControlOptions<Date>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/date-time-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const DateTimeControl: (options: ControlOptions<Date>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/email-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const EmailControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/form-status.d.ts

@@ -0,0 +1,20 @@
+export type FormFilling = {
+    type: 'filling';
+};
+export type FormSubmitting = {
+    type: 'submitting';
+};
+export type FormError = {
+    type: 'error';
+    error: string;
+};
+export type FormSuccess = {
+    type: 'success';
+};
+export type FormStatus = FormFilling | FormSubmitting | FormError | FormSuccess;
+export declare const FormStatus: {
+    filling: FormStatus;
+    submitting: FormStatus;
+    error: (error: string) => FormStatus;
+    success: FormStatus;
+};

package/dist/types/components/form/control/index.d.ts

@@ -0,0 +1,21 @@
+export * from './control-input-wrapper';
+export * from './control-options';
+export * from './date-control';
+export * from './date-time-control';
+export * from './email-control';
+export * from './form-status';
+export * from './lazy-native-select-control';
+export * from './native-select-control';
+export * from './nullable-date-control';
+export * from './nullable-date-time-control';
+export * from './nullable-string-date-control';
+export * from './nullable-string-date-time-control';
+export * from './nullable-text-area-control';
+export * from './nullable-text-control';
+export * from './number-control';
+export * from './password-control';
+export * from './segmented-control';
+export * from './string-date-control';
+export * from './tags-control';
+export * from './text-area-control';
+export * from './text-control';

package/dist/types/components/form/control/lazy-native-select-control.d.ts

@@ -0,0 +1,16 @@
+import { ControlOptions } from './control-options';
+import { SelectOption } from '../input/native-select';
+import { Signal, Value } from '@tempots/dom';
+export type LazyNativeSelectControlOptions<T, R> = ControlOptions<T> & {
+    request: Signal<R>;
+    load: (options: {
+        request: R;
+        abortSignal: AbortSignal;
+    }) => Promise<(SelectOption<T> | {
+        id: T;
+        label: string;
+    })[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+};
+export declare const LazyNativeSelectControl: <T, R>(options: LazyNativeSelectControlOptions<T, R>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/native-select-control.d.ts

@@ -0,0 +1,9 @@
+import { ControlOptions } from './control-options';
+import { SelectOption } from '../input/native-select';
+import { Value } from '@tempots/dom';
+export type NativeSelectControlOptions<T> = ControlOptions<T> & {
+    options: Value<SelectOption<T>[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+};
+export declare const NativeSelectControl: <T>(options: NativeSelectControlOptions<T>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-date-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const NullableDateControl: (options: ControlOptions<Date | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-date-time-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const NullableDateTimeControl: (options: ControlOptions<Date | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-string-date-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const NullableStringDateControl: (options: ControlOptions<string | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-string-date-time-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const NullableStringDateTimeControl: (options: ControlOptions<string | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-text-area-control.d.ts

@@ -0,0 +1,7 @@
+import { ControlOptions } from './control-options';
+import { Value } from '@tempots/dom';
+import { Merge } from '@tempots/std';
+export type NullableTextAreaControlOptions = Merge<ControlOptions<string | null>, {
+    rows?: Value<number>;
+}>;
+export declare const NullableTextAreaControl: (options: NullableTextAreaControlOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-text-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const NullableTextControl: (options: ControlOptions<string | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/number-control.d.ts

@@ -0,0 +1,9 @@
+import { ControlOptions } from './control-options';
+import { Merge } from '@tempots/std';
+import { Value } from '@tempots/dom';
+export type NumberControlOptions = Merge<ControlOptions<number>, {
+    step?: Value<number>;
+    min?: Value<number>;
+    max?: Value<number>;
+}>;
+export declare const NumberControl: (options: NumberControlOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/password-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const PasswordControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/segmented-control.d.ts

@@ -0,0 +1,12 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+export interface SegmentedControlProps {
+    segments: {
+        label: TNode;
+        onSelect?: () => void;
+    }[];
+    activeSegment: Value<number | null>;
+    onSegmentChange?: (index?: number) => void;
+    size?: Value<ControlSize>;
+}
+export declare function SegmentedControl({ segments, activeSegment, onSegmentChange, size, }: SegmentedControlProps): import("@tempots/dom").Renderable;

package/dist/types/components/form/control/string-date-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const StringDateControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/tags-control.d.ts

@@ -0,0 +1,2 @@
+import { ControlOptions } from './control-options';
+export declare const TagsControl: (options: ControlOptions<string[]>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/text-area-control.d.ts

@@ -0,0 +1,7 @@
+import { ControlOptions } from './control-options';
+import { Value } from '@tempots/dom';
+import { Merge } from '@tempots/std';
+export type TextAreaControlOptions = Merge<ControlOptions<string>, {
+    rows?: Value<number>;
+}>;
+export declare const TextAreaControl: (options: TextAreaControlOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/text-control.d.ts

@@ -0,0 +1,7 @@
+import { ControlOptions } from './control-options';
+import { ValueController } from '../controller/value-controller';
+export declare const makeOnBlurHandler: (controller: ValueController<any>, onBlur?: () => void) => () => void;
+export declare const makeOnChangeHandler: <T>(controller: ValueController<T>, onChange?: (value: T) => void) => (value: T) => void;
+export declare const makeMappedOnChangeHandler: <T, U>(controller: ValueController<T>, map: (value: U) => T, onChange?: (value: T) => void) => (value: U) => void;
+export declare const makeNullableOnChangeHandler: <T>(controller: ValueController<T | null>, isEmpty: (value: T) => boolean, onChange?: (value: T | null) => void) => (value: T) => void;
+export declare const TextControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/controller/form-controller.d.ts

@@ -0,0 +1,4 @@
+import { GroupController } from './group-controller';
+export declare class FormController<In extends Record<string, any>> extends GroupController<In> {
+    dispose(): void;
+}

package/dist/types/components/form/controller/group-controller.d.ts

@@ -0,0 +1,15 @@
+import { ValidationResult } from './validation-result';
+import { ValueController } from './value-controller';
+import { ListController } from './list-controller';
+import { Signal } from '@tempots/dom';
+import { Path } from './path';
+export declare class GroupController<In extends Record<string, any>> extends ValueController<In> {
+    #private;
+    constructor(path: Path, change: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+        disabled: Signal<boolean>;
+    });
+    readonly field: <K extends keyof In & string>(field: In[K] extends any[] | Record<string, any> ? never : K) => ValueController<In[K]>;
+    readonly list: <K extends keyof In & string>(field: In[K] extends any[] ? K : never) => ListController<In[K]>;
+    readonly group: <K extends keyof In & string>(field: In[K] extends Record<string, any> ? K : never) => GroupController<In[K]>;
+    dispose(): void;
+}

package/dist/types/components/form/controller/index.d.ts

@@ -0,0 +1,6 @@
+export * from './form-controller';
+export * from './group-controller';
+export * from './list-controller';
+export * from './path';
+export * from './validation-result';
+export * from './value-controller';

package/dist/types/components/form/controller/list-controller.d.ts

@@ -0,0 +1,22 @@
+import { Signal } from '@tempots/dom';
+import { Path } from './path';
+import { ValidationResult } from './validation-result';
+import { ValueController } from './value-controller';
+import { GroupController } from './group-controller';
+export declare class ListController<In extends any[]> extends ValueController<In> {
+    #private;
+    constructor(path: Path, change: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+        disabled: Signal<boolean>;
+    });
+    readonly length: import("@tempots/dom").Computed<number>;
+    readonly item: (index: In[number] extends Record<string, any> | any[] ? never : number) => ValueController<In[number]>;
+    readonly list: (index: In[number] extends In[number] ? number : never) => ListController<In[number]>;
+    readonly group: (index: In[number] extends Record<string, any> ? number : never) => GroupController<In[number]>;
+    dispose(): void;
+    readonly push: (...value: In[number][]) => void;
+    readonly pop: () => void;
+    readonly shift: () => void;
+    readonly unshift: (...value: In[number]) => void;
+    readonly removeAt: (index: number) => void;
+    readonly splice: (start: number, deleteCount?: number) => void;
+}

package/dist/types/components/form/controller/path.d.ts

@@ -0,0 +1,5 @@
+export type PathSegment = string | number;
+export type Path = PathSegment[];
+export declare function parsePath(path: string): Path;
+export declare function wrapSegment(v: number | string): string;
+export declare function pathToString(path: Path): string;

package/dist/types/components/form/controller/validation-result.d.ts

@@ -0,0 +1,12 @@
+export type Valid = {
+    type: 'Valid';
+};
+export type InvalidDependencies = {
+    error?: string;
+    dependencies?: Record<string | number, InvalidDependencies>;
+};
+export type Invalid = {
+    type: 'Invalid';
+} & InvalidDependencies;
+export type ValidationResult = Valid | Invalid;
+export declare function makeMapValidationResult(field: string | number): (status: ValidationResult) => ValidationResult;

package/dist/types/components/form/controller/value-controller.d.ts

@@ -0,0 +1,27 @@
+import { Signal } from '@tempots/dom';
+import { Path } from './path';
+import { InvalidDependencies, ValidationResult } from './validation-result';
+export declare class ValueController<In> {
+    #private;
+    readonly path: Path;
+    readonly change: (value: In) => void;
+    readonly value: Signal<In>;
+    readonly status: Signal<ValidationResult>;
+    readonly error: Signal<undefined | string>;
+    readonly hasError: Signal<boolean>;
+    readonly dependencyErrors: Signal<undefined | Record<string | number, InvalidDependencies>>;
+    protected readonly parent: {
+        disabled: Signal<boolean>;
+    };
+    readonly disabled: Signal<boolean>;
+    constructor(path: Path, change: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+        disabled: Signal<boolean>;
+    });
+    get name(): string;
+    dispose(): void;
+    readonly disable: () => void;
+    readonly enable: () => void;
+}
+export type CreateController<In, VC extends ValueController<In>> = (path: Path, onChange: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+    disabled: Signal<boolean>;
+}) => VC;

package/dist/types/components/form/index.d.ts

@@ -0,0 +1,5 @@
+export * from './control';
+export * from './controller';
+export * from './input';
+export * from './schema';
+export * from './use-form';

package/dist/types/components/form/input/checkbox-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const CheckboxInput: (options: InputOptions<boolean>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/date-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const DateInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/date-time-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const DateTimeInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/editable-text.d.ts

@@ -0,0 +1,8 @@
+import { Renderable, Value } from '@tempots/dom';
+export type EditableTextOptions = {
+    value: Value<string>;
+    onChange: (value: string) => void;
+    placeholder?: Value<string>;
+    startEditing?: Value<boolean>;
+};
+export declare const EditableText: ({ startEditing, value, onChange, placeholder, }: EditableTextOptions) => Renderable;

package/dist/types/components/form/input/email-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const EmailInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/index.d.ts

@@ -0,0 +1,18 @@
+export * from './checkbox-input';
+export * from './date-input';
+export * from './date-time-input';
+export * from './editable-text';
+export * from './email-input';
+export * from './input-container';
+export * from './input-options';
+export * from './lazy-native-select';
+export * from './native-select';
+export * from './nullable-date-input';
+export * from './nullable-date-time-input';
+export * from './nullable-text-area';
+export * from './nullable-text-input';
+export * from './number-input';
+export * from './password-input';
+export * from './tags-input';
+export * from './text-area';
+export * from './text-input';

package/dist/types/components/form/input/input-container.d.ts

@@ -0,0 +1,11 @@
+import { TNode, Value } from '@tempots/dom';
+export declare const InputContainer: ({ child, disabled, input, before, after, hasError, focusableSelector, growInput, }: {
+    child?: TNode;
+    disabled?: Value<boolean>;
+    input: TNode;
+    before?: TNode;
+    after?: TNode;
+    hasError?: Value<boolean>;
+    focusableSelector?: string;
+    growInput?: Value<boolean>;
+}) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/input-options.d.ts

@@ -0,0 +1,34 @@
+import { TNode, Value } from '@tempots/dom';
+import { Merge } from '@tempots/std';
+import { ValueController } from '../controller/value-controller';
+export type CommonInputOptions = {
+    autocomplete?: Value<string>;
+    autofocus?: Value<boolean>;
+    class?: Value<string>;
+    disabled?: Value<boolean>;
+    hasError?: Value<boolean>;
+    name?: Value<string>;
+    placeholder?: Value<string>;
+    id?: Value<string>;
+};
+export type InputOptions<V> = Merge<CommonInputOptions, {
+    value: Value<V>;
+    before?: TNode;
+    after?: TNode;
+    onChange?: (value: V) => void;
+    onInput?: (value: V) => void;
+    onBlur?: () => void;
+}>;
+export declare const CommonInputAttributes: ({ autocomplete, autofocus, class: cls, disabled, name, placeholder, id, }: CommonInputOptions) => import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export declare const inputOptionsFromController: <T>(controller: ValueController<T>) => {
+    id: string;
+    disabled: import("@tempots/dom").Signal<boolean>;
+    value: import("@tempots/dom").Signal<T>;
+    hasError: import("@tempots/dom").Signal<boolean>;
+};
+export declare const inputOptionsFromMappedController: <T, U>(controller: ValueController<U>, map: (value: U) => T) => {
+    value: import("@tempots/dom").Computed<T>;
+    id: string;
+    disabled: import("@tempots/dom").Signal<boolean>;
+    hasError: import("@tempots/dom").Signal<boolean>;
+};

package/dist/types/components/form/input/lazy-native-select.d.ts

@@ -0,0 +1,16 @@
+import { Signal, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { SelectOption } from './native-select';
+export type LazyNativeSelectOptions<T, R> = InputOptions<T> & {
+    request: Signal<R>;
+    load: (options: {
+        request: R;
+        abortSignal: AbortSignal;
+    }) => Promise<(SelectOption<T> | {
+        id: T;
+        label: string;
+    })[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+};
+export declare const LazyNativeSelect: <T, R>(options: LazyNativeSelectOptions<T, R>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/native-select.d.ts

@@ -0,0 +1,31 @@
+import { Renderable, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+export type ValueOption<T> = {
+    type: 'value';
+    value: T;
+    label: string;
+    disabled?: boolean;
+};
+export type GroupOption<T> = {
+    type: 'group';
+    group: string;
+    options: ValueOption<T>[];
+    disabled?: boolean;
+};
+export type BreakOption = {
+    type: 'break';
+};
+export type SelectOption<T> = ValueOption<T> | GroupOption<T> | BreakOption;
+export declare const SelectOption: {
+    value: <T>(value: T, label: string, disabled?: boolean) => ValueOption<T>;
+    group: <T>(group: string, options: (ValueOption<T> | BreakOption)[], disabled?: boolean) => GroupOption<T>;
+    break: BreakOption;
+    getOptionValues: <T>(options: SelectOption<T>[]) => T[];
+    contains: <T>(options: SelectOption<T>[], value: T, equality?: (a: T, b: T) => boolean) => boolean;
+};
+export type NativeSelectOptions<T> = InputOptions<T> & {
+    options: Value<SelectOption<T>[]>;
+    unselectedLabel?: Value<string>;
+    equality?: (a: T, b: T) => boolean;
+};
+export declare const NativeSelect: <T>(options: NativeSelectOptions<T>) => Renderable;