tembro 2.1.13 → 3.1.1

package/dist/src/components/form/index.js

@@ -0,0 +1,9 @@
+import { FormFieldShell as e, resolveFormFieldIds as t } from "./form-field-shell.js";
+import { FormInput as n } from "./form-input.js";
+import { FormSelect as r } from "./form-select.js";
+import { FormSwitch as i } from "./form-switch.js";
+import { FormTextarea as a } from "./form-textarea.js";
+import { FormDatePicker as o } from "./form-date-picker.js";
+import { FormDateRangePicker as s } from "./form-date-range-picker.js";
+import { FormDateRangeInput as c } from "./form-date-range-input.js";
+export { o as FormDatePicker, c as FormDateRangeInput, s as FormDateRangePicker, e as FormFieldShell, n as FormInput, r as FormSelect, i as FormSwitch, a as FormTextarea, t as resolveFormFieldIds };

package/dist/src/components/form/public.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./form-field-shell.cjs"),t=require("./form-input.cjs"),n=require("./form-select.cjs"),r=require("./form-switch.cjs"),i=require("./form-textarea.cjs"),a=require("./form-date-picker.cjs"),o=require("./form-date-range-picker.cjs"),s=require("./form-date-range-input.cjs");exports.FormDatePicker=a.FormDatePicker,exports.FormDateRangeInput=s.FormDateRangeInput,exports.FormDateRangePicker=o.FormDateRangePicker,exports.FormFieldShell=e.FormFieldShell,exports.FormInput=t.FormInput,exports.FormSelect=n.FormSelect,exports.FormSwitch=r.FormSwitch,exports.FormTextarea=i.FormTextarea,exports.resolveFormFieldIds=e.resolveFormFieldIds;

package/dist/src/components/form/public.js

@@ -0,0 +1,9 @@
+import { FormFieldShell as e, resolveFormFieldIds as t } from "./form-field-shell.js";
+import { FormInput as n } from "./form-input.js";
+import { FormSelect as r } from "./form-select.js";
+import { FormSwitch as i } from "./form-switch.js";
+import { FormTextarea as a } from "./form-textarea.js";
+import { FormDatePicker as o } from "./form-date-picker.js";
+import { FormDateRangePicker as s } from "./form-date-range-picker.js";
+import { FormDateRangeInput as c } from "./form-date-range-input.js";
+export { o as FormDatePicker, c as FormDateRangeInput, s as FormDateRangePicker, e as FormFieldShell, n as FormInput, r as FormSelect, i as FormSwitch, a as FormTextarea, t as resolveFormFieldIds };

package/dist/src/components/inputs/async-select.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function ee(e,t){let[n,r]=a.useState(e);return a.useEffect(()=>{let n=window.setTimeout(()=>{r(e)},t);return()=>{window.clearTimeout(n)}},[t,e]),n}function te(e){return typeof e==`object`&&!!e&&`options`in e}function ne(e){if(!e||e.length===0)return[];let t=e[0];return te(t)?e:[{options:e}]}function c(e){return e.flatMap(e=>e.options)}function l(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label).toLowerCase():e.value.toLowerCase()}function re(e,t){let n=e.trim().toLowerCase();return n?!t.some(e=>e.value.toLowerCase()===n||l(e)===n):!1}function u(e,t,n,r,i){if(e)return t?.value===e?t:i?.value===e?i:[...n,...r].find(t=>t.value===e)}function d(...e){let t=new Map;return e.forEach(e=>{e?.forEach(e=>{t.set(e.value,e)})}),Array.from(t.values())}function f(e,t){let n=new Map(t.map(e=>[e.value,e]));return e.map(e=>n.get(e)).filter(e=>!!e)}function ie(e,t,n){let r=e.get(t);if(r){if(Number.isFinite(n)&&Date.now()-r.createdAt>n){e.delete(t);return}return r.groups}}function ae(e,t,n){e.set(t,{groups:n,createdAt:Date.now()})}function oe(e){return e.trim().toLowerCase()}function p({className:e,children:n}){return(0,s.jsx)(`div`,{"data-slot":`async-select-state`,className:t.cn(`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground`,e),children:n})}function se(e){return typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value}function ce({option:e,selected:n,renderOption:r,optionClassName:i,onSelect:a}){return(0,s.jsxs)(`button`,{type:`button`,disabled:e.disabled,"data-slot":`async-select-option`,"data-selected":n||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50`,i),onClick:()=>a(e),children:[(0,s.jsx)(`span`,{className:t.cn(`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70`,n&&`border-primary bg-primary text-primary-foreground`),children:n&&(0,s.jsx)(o.CheckIcon,{className:`size-3`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1`,children:r?.(e,{selected:n})??(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate font-medium`,children:e.label}),e.description&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.description}),e.disabled&&e.disabledReason&&(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:e.disabledReason})]})})]})}function le({search:e,isCreating:t,label:n,onCreate:r}){return(0,s.jsxs)(`button`,{type:`button`,disabled:t,"data-slot":`async-select-create`,className:`flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50`,onClick:r,children:[(0,s.jsx)(`span`,{className:`flex size-4 shrink-0 items-center justify-center`,children:t?(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}):(0,s.jsx)(o.PlusIcon,{className:`size-4`})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:n?.(e)??`Create "${e.trim()}"`})]})}function m(e){let{className:te,value:l,selectedOption:d,onValueChange:f,loadOptions:se,loadSelectedOption:m,defaultOptions:h,disabled:g=!1,clearable:_=!0,cacheOptions:v=!0,cacheTtl:y=1/0,debounceMs:ue=250,minSearchLength:b=0,labels:x,renderOption:S,renderValue:C,renderLoading:de,renderEmpty:fe,renderError:w,renderMinSearch:pe,onCreateOption:me,createOptionLabel:he,showCreateOption:ge,showSelectedDescription:_e=!0,triggerClassName:ve,contentClassName:ye,searchClassName:be,optionClassName:xe,invalid:Se,...Ce}=e,T=a.useMemo(()=>ne(h),[h]),we=a.useMemo(()=>c(T),[T]),[E,D]=a.useState(!1),[O,k]=a.useState(``),[Te,A]=a.useState(T),[j,Ee]=a.useState(null),[M,N]=a.useState(!1),[P,F]=a.useState(!1),[I,L]=a.useState(!1),R=a.useRef(new Map),z=a.useRef(0),De=a.useRef(0),B=ee(O,ue).trim(),V=a.useMemo(()=>c(Te),[Te]),H=a.useMemo(()=>({search:O,minSearchLength:b,options:V}),[V,b,O]),U=u(l,d,V,we,j),Oe=_&&!!l&&!g,W=B.length<b,G=!W&&!!me&&(ge??re)(O,V);a.useEffect(()=>{R.current.clear()},[se]),a.useEffect(()=>{A(T)},[T]),a.useEffect(()=>{if(!l||U||!m)return;let e=new AbortController,t=++De.current;async function n(){let n=await m?.(l,e.signal);!e.signal.aborted&&t===De.current&&Ee(n??null)}return n(),()=>{e.abort()}},[U,m,l]),a.useEffect(()=>{if(!E)return;if(W){A(T),N(!1),L(!1);return}let e=v?ie(R.current,B,y):void 0;if(e){A(e),N(!1),L(!1);return}let t=new AbortController,n=++z.current;async function r(){N(!0),L(!1);try{let e=ne(await se(B,t.signal));!t.signal.aborted&&n===z.current&&(v&&ae(R.current,B,e),A(e))}catch{!t.signal.aborted&&n===z.current&&(L(!0),A([]))}finally{!t.signal.aborted&&n===z.current&&N(!1)}}return r(),()=>{t.abort()}},[v,y,se,E,T,B,W]);let K=e=>{e.disabled||(f?.(e.value,e),D(!1),k(``))},q=()=>{f?.(void 0),k(``)},ke=e=>{t.stopInteractivePropagation(e),q()},J=e=>{if(!g){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),D(!0);return}(e.key===`Backspace`||e.key===`Delete`)&&l&&(e.preventDefault(),q())}},Y=async()=>{if(!(!me||!O.trim()||W)){F(!0);try{let e=await me(O.trim()),t=oe(O);A(t=>[{options:[e]},...t]),v&&t&&ae(R.current,t,[{options:[e]}]),f?.(e.value,e),k(``),D(!1)}finally{F(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-select`,className:t.cn(`w-full`,te),...Ce,children:(0,s.jsxs)(i.Popover,{open:E,onOpenChange:D,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:g,"aria-expanded":E,"aria-invalid":Se||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left`,ve),onKeyDown:J}),children:[(0,s.jsx)(`span`,{className:`min-w-0 flex-1 text-left`,children:U?(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col gap-0.5`,children:[(0,s.jsx)(`span`,{className:`truncate font-semibold`,children:C?.(U)??U.label}),_e&&(U.description||U.disabled&&U.disabledReason)?(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:U.description??U.disabledReason}):null]}):(0,s.jsx)(`span`,{className:`truncate text-muted-foreground`,children:x?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Oe&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,className:`rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground`,"aria-label":x?.clear??`Clear`,onClick:ke,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),q())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,ye),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:O,onChange:e=>k(e.target.value),placeholder:x?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,be)})]}),(0,s.jsxs)(`div`,{className:`max-h-72 space-y-1 overflow-y-auto pr-1`,children:[W&&V.length===0&&(pe?.(H)??(0,s.jsx)(p,{children:x?.minSearchLength?.(b)??`Type at least ${b} characters`})),M&&(de?.(H)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),x?.loading??`Loading...`]})})),!M&&I&&(w?.(H)??(0,s.jsx)(p,{className:`text-destructive`,children:x?.error??`Could not load options`})),!M&&!I&&!W&&V.length===0&&!G&&(fe?.(H)??(0,s.jsx)(p,{children:x?.empty??`No options found`})),!M&&!I&&G&&(0,s.jsx)(le,{search:O,isCreating:P,label:he,onCreate:Y}),!M&&!I&&Te.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:e.label}),e.options.map(e=>(0,s.jsx)(ce,{option:e,selected:e.value===l,renderOption:S,optionClassName:xe,onSelect:K},e.value))]},t))]})]})]})})}function h({className:e,value:te,selectedOptions:l,onValueChange:u,loadOptions:m,loadSelectedOptions:h,defaultOptions:g,disabled:_=!1,clearable:v=!0,cacheOptions:y=!0,cacheTtl:ue=1/0,closeOnSelect:b=!1,debounceMs:x=250,minSearchLength:S=0,maxSelected:C,maxVisibleTags:de,showSelectAll:fe=!1,labels:w,renderOption:pe,renderValue:me,renderTag:he,renderLoading:ge,renderEmpty:_e,renderError:ve,renderMinSearch:ye,renderMaxSelected:be,onCreateOption:xe,createOptionLabel:Se,showCreateOption:Ce,showSelectedDescription:T=!0,triggerClassName:we,contentClassName:E,searchClassName:D,optionClassName:O,tagClassName:k,invalid:Te,...A}){let j=a.useMemo(()=>te??[],[te]),Ee=j.join(`|`),M=a.useMemo(()=>ne(g),[g]),N=a.useMemo(()=>c(M),[M]),[P,F]=a.useState(!1),[I,L]=a.useState(``),[R,z]=a.useState(M),[De,B]=a.useState([]),[V,H]=a.useState(!1),[U,Oe]=a.useState(!1),[W,G]=a.useState(!1),K=a.useRef(new Map),q=a.useRef(0),ke=a.useRef(0),J=ee(I,x).trim(),Y=a.useMemo(()=>c(R),[R]),Ae=a.useMemo(()=>new Set(j),[j]),X=a.useMemo(()=>d(l,De,Y,N),[N,Y,De,l]),je=a.useMemo(()=>f(j,X),[X,j]),Z=a.useMemo(()=>({search:I,minSearchLength:S,options:Y,selectedCount:j.length,maxSelected:C}),[Y,C,S,I,j.length]),Me=j.length>0,Ne=v&&Me&&!_,Pe=typeof C==`number`&&j.length>=C,Fe=Math.max(de??j.length,1),Q=J.length<S,Ie=!Q&&!!xe&&(Ce??re)(I,Y),$=Y.filter(e=>!e.disabled).filter(e=>!Ae.has(e.value)),Le=fe&&$.length>0&&!Pe,Re=je.slice(0,Fe),ze=Math.max(je.length-Re.length,0);a.useEffect(()=>{K.current.clear()},[m]),a.useEffect(()=>{z(M)},[M]),a.useEffect(()=>{if(!j.length||!h)return;let e=new Set(X.map(e=>e.value)),t=j.filter(t=>!e.has(t));if(!t.length)return;let n=new AbortController,r=++ke.current;async function i(){let e=await h?.(t,n.signal);!n.signal.aborted&&r===ke.current&&e&&B(t=>d(t,e))}return i(),()=>{n.abort()}},[X,h,Ee,j]),a.useEffect(()=>{if(!P)return;if(Q){z(M),H(!1),G(!1);return}let e=y?ie(K.current,J,ue):void 0;if(e){z(e),H(!1),G(!1);return}let t=new AbortController,n=++q.current;async function r(){H(!0),G(!1);try{let e=ne(await m(J,t.signal));!t.signal.aborted&&n===q.current&&(y&&ae(K.current,J,e),z(e))}catch{!t.signal.aborted&&n===q.current&&(G(!0),z([]))}finally{!t.signal.aborted&&n===q.current&&H(!1)}}return r(),()=>{t.abort()}},[y,ue,m,P,M,J,Q]);let Be=(e,t)=>{u?.(e,f(e,t))},Ve=e=>{Be(j.filter(t=>t!==e),X)},He=e=>{e.disabled||(Be(Ae.has(e.value)?j.filter(t=>t!==e.value):Pe?j:[...j,e.value],d(X,[e])),b&&(F(!1),L(``)))},Ue=(e,n)=>{e.key!==`Enter`&&e.key!==` `&&e.key!==`Backspace`&&e.key!==`Delete`||(e.preventDefault(),t.stopInteractivePropagation(e),Ve(n.value))},We=e=>{if(!_){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),F(!0);return}I.length>0||j.length===0||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),Ve(j[j.length-1]))}},Ge=()=>{if(!$.length)return;let e=typeof C==`number`?Math.max(C-j.length,0):$.length,t=$.slice(0,e);Be(Array.from(new Set([...j,...t.map(e=>e.value)])),d(X,t))},Ke=e=>{Ve(e.value)},qe=()=>{u?.([],[]),L(``)},Je=e=>{t.stopInteractivePropagation(e),qe()},Ye=async()=>{if(!(!xe||!I.trim()||Q)){Oe(!0);try{let e=await xe(I.trim()),t=oe(I),n=d(X,[e]),r=Ae.has(e.value)||Pe?j:[...j,e.value];z(t=>[{options:[e]},...t]),y&&t&&ae(K.current,t,[{options:[e]}]),Be(r,n),L(``),b&&F(!1)}finally{Oe(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-multi-select`,className:t.cn(`w-full`,e),...A,children:(0,s.jsxs)(i.Popover,{open:P,onOpenChange:F,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:_,"aria-expanded":P,"aria-invalid":Te||void 0,"data-slot":`async-select-trigger`,className:t.cn(`min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left`,we),onKeyDown:We}),children:[(0,s.jsx)(`span`,{className:`flex min-w-0 flex-1 flex-wrap gap-1 text-left`,children:je.length>0?(0,s.jsxs)(s.Fragment,{children:[Re.map(e=>(0,s.jsxs)(`span`,{"data-slot":`async-select-tag`,className:t.cn(`inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground`,k),children:[(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:he?.(e,{remove:()=>Ke(e)})??me?.(e)??e.label}),T&&(e.description||e.disabled&&e.disabledReason)?(0,s.jsx)(`span`,{className:`truncate text-[11px] text-muted-foreground`,children:e.description??e.disabledReason}):null]}),!_&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-tag-remove`,className:`rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground`,"aria-label":`Remove ${se(e)}`,onClick:n=>{t.stopInteractivePropagation(n),Ke(e)},onKeyDown:t=>Ue(t,e),children:(0,s.jsx)(o.XIcon,{className:`size-3`})})]},e.value)),ze>0?(0,s.jsx)(`span`,{"data-slot":`async-select-tag-overflow`,className:t.cn(`inline-flex max-w-full items-center rounded-[var(--radius-sm)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] px-2 py-1 text-xs font-medium text-muted-foreground`,k),children:w?.hiddenSelected?.(ze)??`+${ze} more`}):null]}):(0,s.jsx)(`span`,{className:`truncate text-muted-foreground`,children:w?.multiPlaceholder??w?.placeholder??`Select`})}),(0,s.jsxs)(`span`,{className:`ml-2 flex shrink-0 items-center gap-1`,children:[Ne&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-clear`,className:`rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground`,"aria-label":w?.clearAll??w?.clear??`Clear all`,onClick:Je,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),qe())},children:(0,s.jsx)(o.XIcon,{className:`size-3.5`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,E),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{"data-slot":`async-select-search`,value:I,onChange:e=>L(e.target.value),placeholder:w?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,D)})]}),(0,s.jsxs)(`div`,{"data-slot":`async-select-meta`,className:`flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground`,children:[Me&&w?.selectedCount&&(0,s.jsx)(`span`,{children:w.selectedCount(j.length)}),Pe&&(be?.(Z)??(0,s.jsx)(`span`,{children:w?.maxSelected?.(C??j.length)??`Maximum ${C} selected`})),(0,s.jsxs)(`div`,{className:`ml-auto flex items-center gap-2`,children:[Le&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:Ge,children:w?.selectAll??`Select all`}),Ne&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,className:`rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background`,onClick:()=>u?.([],[]),children:w?.clearAll??w?.clear??`Clear all`})]})]}),(0,s.jsxs)(`div`,{className:`max-h-72 space-y-1 overflow-y-auto pr-1`,children:[Q&&Y.length===0&&(ye?.(Z)??(0,s.jsx)(p,{children:w?.minSearchLength?.(S)??`Type at least ${S} characters`})),V&&(ge?.(Z)??(0,s.jsx)(p,{children:(0,s.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,s.jsx)(o.Loader2Icon,{className:`size-4 animate-spin`}),w?.loading??`Loading...`]})})),!V&&W&&(ve?.(Z)??(0,s.jsx)(p,{className:`text-destructive`,children:w?.error??`Could not load options`})),!V&&!W&&!Q&&Y.length===0&&!Ie&&(_e?.(Z)??(0,s.jsx)(p,{children:w?.empty??`No options found`})),!V&&!W&&Ie&&(0,s.jsx)(le,{search:I,isCreating:U,label:Se,onCreate:Ye}),!V&&!W&&R.map((e,t)=>(0,s.jsxs)(`div`,{children:[e.label&&(0,s.jsx)(`div`,{className:`sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground`,children:(0,s.jsx)(`span`,{"data-slot":`async-select-group-label`,children:e.label})}),e.options.map(e=>(0,s.jsx)(ce,{option:e,selected:Ae.has(e.value),renderOption:pe,optionClassName:O,onSelect:He},e.value))]},t))]})]})]})})}function g(e){return e.isMulti?(0,s.jsx)(h,{...e}):(0,s.jsx)(m,{...e})}exports.AsyncMultiSelect=h,exports.AsyncSelect=g;

package/dist/src/components/inputs/async-select.js

@@ -0,0 +1,579 @@
+"use client";
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Button as n } from "../ui/button/index.js";
+import { Input as r } from "../ui/input/index.js";
+import { Popover as i, PopoverContent as ee, PopoverTrigger as te } from "../ui/popover/index.js";
+import * as a from "react";
+import { CheckIcon as ne, ChevronsUpDownIcon as re, Loader2Icon as ie, PlusIcon as ae, SearchIcon as oe, XIcon as se } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inputs/async-select.tsx
+function ce(e, t) {
+	let [n, r] = a.useState(e);
+	return a.useEffect(() => {
+		let n = window.setTimeout(() => {
+			r(e);
+		}, t);
+		return () => {
+			window.clearTimeout(n);
+		};
+	}, [t, e]), n;
+}
+function l(e) {
+	return typeof e == "object" && !!e && "options" in e;
+}
+function le(e) {
+	if (!e || e.length === 0) return [];
+	let t = e[0];
+	return l(t) ? e : [{ options: e }];
+}
+function ue(e) {
+	return e.flatMap((e) => e.options);
+}
+function u(e) {
+	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label).toLowerCase() : e.value.toLowerCase();
+}
+function de(e, t) {
+	let n = e.trim().toLowerCase();
+	return n ? !t.some((e) => e.value.toLowerCase() === n || u(e) === n) : !1;
+}
+function fe(e, t, n, r, i) {
+	if (e) return t?.value === e ? t : i?.value === e ? i : [...n, ...r].find((t) => t.value === e);
+}
+function d(...e) {
+	let t = /* @__PURE__ */ new Map();
+	return e.forEach((e) => {
+		e?.forEach((e) => {
+			t.set(e.value, e);
+		});
+	}), Array.from(t.values());
+}
+function f(e, t) {
+	let n = new Map(t.map((e) => [e.value, e]));
+	return e.map((e) => n.get(e)).filter((e) => !!e);
+}
+function pe(e, t, n) {
+	let r = e.get(t);
+	if (r) {
+		if (Number.isFinite(n) && Date.now() - r.createdAt > n) {
+			e.delete(t);
+			return;
+		}
+		return r.groups;
+	}
+}
+function me(e, t, n) {
+	e.set(t, {
+		groups: n,
+		createdAt: Date.now()
+	});
+}
+function he(e) {
+	return e.trim().toLowerCase();
+}
+function p({ className: t, children: n }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "async-select-state",
+		className: e("rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground", t),
+		children: n
+	});
+}
+function ge(e) {
+	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value;
+}
+function _e({ option: t, selected: n, renderOption: r, optionClassName: i, onSelect: ee }) {
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		disabled: t.disabled,
+		"data-slot": "async-select-option",
+		"data-selected": n || void 0,
+		"data-disabled": t.disabled || void 0,
+		className: e("flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50", i),
+		onClick: () => ee(t),
+		children: [/* @__PURE__ */ s("span", {
+			className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", n && "border-primary bg-primary text-primary-foreground"),
+			children: n && /* @__PURE__ */ s(ne, { className: "size-3" })
+		}), /* @__PURE__ */ s("span", {
+			className: "min-w-0 flex-1",
+			children: r?.(t, { selected: n }) ?? /* @__PURE__ */ c("span", {
+				className: "flex min-w-0 flex-col",
+				children: [
+					/* @__PURE__ */ s("span", {
+						className: "truncate font-medium",
+						children: t.label
+					}),
+					t.description && /* @__PURE__ */ s("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: t.description
+					}),
+					t.disabled && t.disabledReason && /* @__PURE__ */ s("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: t.disabledReason
+					})
+				]
+			})
+		})]
+	});
+}
+function ve({ search: e, isCreating: t, label: n, onCreate: r }) {
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		disabled: t,
+		"data-slot": "async-select-create",
+		className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50",
+		onClick: r,
+		children: [/* @__PURE__ */ s("span", {
+			className: "flex size-4 shrink-0 items-center justify-center",
+			children: t ? /* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }) : /* @__PURE__ */ s(ae, { className: "size-4" })
+		}), /* @__PURE__ */ s("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: n?.(e) ?? `Create "${e.trim()}"`
+		})]
+	});
+}
+function m(ne) {
+	let { className: ae, value: o, selectedOption: l, onValueChange: u, loadOptions: d, loadSelectedOption: f, defaultOptions: ge, disabled: m = !1, clearable: h = !0, cacheOptions: g = !0, cacheTtl: ye = Infinity, debounceMs: _ = 250, minSearchLength: v = 0, labels: y, renderOption: be, renderValue: b, renderLoading: x, renderEmpty: xe, renderError: Se, renderMinSearch: S, onCreateOption: Ce, createOptionLabel: we, showCreateOption: Te, showSelectedDescription: Ee = !0, triggerClassName: De, contentClassName: Oe, searchClassName: ke, optionClassName: Ae, invalid: C, ...je } = ne, w = a.useMemo(() => le(ge), [ge]), Me = a.useMemo(() => ue(w), [w]), [T, E] = a.useState(!1), [D, O] = a.useState(""), [k, A] = a.useState(w), [Ne, j] = a.useState(null), [M, N] = a.useState(!1), [Pe, P] = a.useState(!1), [F, I] = a.useState(!1), L = a.useRef(/* @__PURE__ */ new Map()), R = a.useRef(0), z = a.useRef(0), B = ce(D, _).trim(), V = a.useMemo(() => ue(k), [k]), H = a.useMemo(() => ({
+		search: D,
+		minSearchLength: v,
+		options: V
+	}), [
+		V,
+		v,
+		D
+	]), U = fe(o, l, V, Me, Ne), Fe = h && !!o && !m, W = B.length < v, G = !W && !!Ce && (Te ?? de)(D, V);
+	a.useEffect(() => {
+		L.current.clear();
+	}, [d]), a.useEffect(() => {
+		A(w);
+	}, [w]), a.useEffect(() => {
+		if (!o || U || !f) return;
+		let e = new AbortController(), t = ++z.current;
+		async function n() {
+			let n = await f?.(o, e.signal);
+			!e.signal.aborted && t === z.current && j(n ?? null);
+		}
+		return n(), () => {
+			e.abort();
+		};
+	}, [
+		U,
+		f,
+		o
+	]), a.useEffect(() => {
+		if (!T) return;
+		if (W) {
+			A(w), N(!1), I(!1);
+			return;
+		}
+		let e = g ? pe(L.current, B, ye) : void 0;
+		if (e) {
+			A(e), N(!1), I(!1);
+			return;
+		}
+		let t = new AbortController(), n = ++R.current;
+		async function r() {
+			N(!0), I(!1);
+			try {
+				let e = le(await d(B, t.signal));
+				!t.signal.aborted && n === R.current && (g && me(L.current, B, e), A(e));
+			} catch {
+				!t.signal.aborted && n === R.current && (I(!0), A([]));
+			} finally {
+				!t.signal.aborted && n === R.current && N(!1);
+			}
+		}
+		return r(), () => {
+			t.abort();
+		};
+	}, [
+		g,
+		ye,
+		d,
+		T,
+		w,
+		B,
+		W
+	]);
+	let K = (e) => {
+		e.disabled || (u?.(e.value, e), E(!1), O(""));
+	}, q = () => {
+		u?.(void 0), O("");
+	}, J = (e) => {
+		t(e), q();
+	}, Ie = (e) => {
+		if (!m) {
+			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), E(!0);
+				return;
+			}
+			(e.key === "Backspace" || e.key === "Delete") && o && (e.preventDefault(), q());
+		}
+	}, Y = async () => {
+		if (!(!Ce || !D.trim() || W)) {
+			P(!0);
+			try {
+				let e = await Ce(D.trim()), t = he(D);
+				A((t) => [{ options: [e] }, ...t]), g && t && me(L.current, t, [{ options: [e] }]), u?.(e.value, e), O(""), E(!1);
+			} finally {
+				P(!1);
+			}
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "async-select",
+		className: e("w-full", ae),
+		...je,
+		children: /* @__PURE__ */ c(i, {
+			open: T,
+			onOpenChange: E,
+			children: [/* @__PURE__ */ c(te, {
+				render: /* @__PURE__ */ s(n, {
+					type: "button",
+					variant: "outline",
+					disabled: m,
+					"aria-expanded": T,
+					"aria-invalid": C || void 0,
+					"data-slot": "async-select-trigger",
+					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", De),
+					onKeyDown: Ie
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "min-w-0 flex-1 text-left",
+					children: U ? /* @__PURE__ */ c("span", {
+						className: "flex min-w-0 flex-col gap-0.5",
+						children: [/* @__PURE__ */ s("span", {
+							className: "truncate font-semibold",
+							children: b?.(U) ?? U.label
+						}), Ee && (U.description || U.disabled && U.disabledReason) ? /* @__PURE__ */ s("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: U.description ?? U.disabledReason
+						}) : null]
+					}) : /* @__PURE__ */ s("span", {
+						className: "truncate text-muted-foreground",
+						children: y?.placeholder ?? "Select"
+					})
+				}), /* @__PURE__ */ c("span", {
+					className: "ml-2 flex shrink-0 items-center gap-1",
+					children: [Fe && /* @__PURE__ */ s("span", {
+						role: "button",
+						tabIndex: 0,
+						className: "rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground",
+						"aria-label": y?.clear ?? "Clear",
+						onClick: J,
+						onKeyDown: (e) => {
+							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), q());
+						},
+						children: /* @__PURE__ */ s(se, { className: "size-3.5" })
+					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
+				})]
+			}), /* @__PURE__ */ c(ee, {
+				align: "start",
+				"data-slot": "async-select-content",
+				className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", Oe),
+				children: [/* @__PURE__ */ c("div", {
+					"data-slot": "async-select-search-wrap",
+					className: "relative",
+					children: [/* @__PURE__ */ s(oe, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ s(r, {
+						"data-slot": "async-select-search",
+						value: D,
+						onChange: (e) => O(e.target.value),
+						placeholder: y?.searchPlaceholder ?? "Search...",
+						className: e("pl-8", ke)
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "max-h-72 space-y-1 overflow-y-auto pr-1",
+					children: [
+						W && V.length === 0 && (S?.(H) ?? /* @__PURE__ */ s(p, { children: y?.minSearchLength?.(v) ?? `Type at least ${v} characters` })),
+						M && (x?.(H) ?? /* @__PURE__ */ s(p, { children: /* @__PURE__ */ c("span", {
+							className: "inline-flex items-center gap-2",
+							children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), y?.loading ?? "Loading..."]
+						}) })),
+						!M && F && (Se?.(H) ?? /* @__PURE__ */ s(p, {
+							className: "text-destructive",
+							children: y?.error ?? "Could not load options"
+						})),
+						!M && !F && !W && V.length === 0 && !G && (xe?.(H) ?? /* @__PURE__ */ s(p, { children: y?.empty ?? "No options found" })),
+						!M && !F && G && /* @__PURE__ */ s(ve, {
+							search: D,
+							isCreating: Pe,
+							label: we,
+							onCreate: Y
+						}),
+						!M && !F && k.map((e, t) => /* @__PURE__ */ c("div", { children: [e.label && /* @__PURE__ */ s("div", {
+							className: "sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground",
+							children: e.label
+						}), e.options.map((e) => /* @__PURE__ */ s(_e, {
+							option: e,
+							selected: e.value === o,
+							renderOption: be,
+							optionClassName: Ae,
+							onSelect: K
+						}, e.value))] }, t))
+					]
+				})]
+			})]
+		})
+	});
+}
+function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loadOptions: fe, loadSelectedOptions: m, defaultOptions: h, disabled: g = !1, clearable: ye = !0, cacheOptions: _ = !0, cacheTtl: v = Infinity, closeOnSelect: y = !1, debounceMs: be = 250, minSearchLength: b = 0, maxSelected: x, maxVisibleTags: xe, showSelectAll: Se = !1, labels: S, renderOption: Ce, renderValue: we, renderTag: Te, renderLoading: Ee, renderEmpty: De, renderError: Oe, renderMinSearch: ke, renderMaxSelected: Ae, onCreateOption: C, createOptionLabel: je, showCreateOption: w, showSelectedDescription: Me = !0, triggerClassName: T, contentClassName: E, searchClassName: D, optionClassName: O, tagClassName: k, invalid: A, ...Ne }) {
+	let j = a.useMemo(() => ae ?? [], [ae]), M = j.join("|"), N = a.useMemo(() => le(h), [h]), Pe = a.useMemo(() => ue(N), [N]), [P, F] = a.useState(!1), [I, L] = a.useState(""), [R, z] = a.useState(N), [B, V] = a.useState([]), [H, U] = a.useState(!1), [Fe, W] = a.useState(!1), [G, K] = a.useState(!1), q = a.useRef(/* @__PURE__ */ new Map()), J = a.useRef(0), Ie = a.useRef(0), Y = ce(I, be).trim(), X = a.useMemo(() => ue(R), [R]), Le = a.useMemo(() => new Set(j), [j]), Z = a.useMemo(() => d(l, B, X, Pe), [
+		Pe,
+		X,
+		B,
+		l
+	]), Re = a.useMemo(() => f(j, Z), [Z, j]), Q = a.useMemo(() => ({
+		search: I,
+		minSearchLength: b,
+		options: X,
+		selectedCount: j.length,
+		maxSelected: x
+	}), [
+		X,
+		x,
+		b,
+		I,
+		j.length
+	]), ze = j.length > 0, Be = ye && ze && !g, Ve = typeof x == "number" && j.length >= x, He = Math.max(xe ?? j.length, 1), $ = Y.length < b, Ue = !$ && !!C && (w ?? de)(I, X), We = X.filter((e) => !e.disabled).filter((e) => !Le.has(e.value)), Ge = Se && We.length > 0 && !Ve, Ke = Re.slice(0, He), qe = Math.max(Re.length - Ke.length, 0);
+	a.useEffect(() => {
+		q.current.clear();
+	}, [fe]), a.useEffect(() => {
+		z(N);
+	}, [N]), a.useEffect(() => {
+		if (!j.length || !m) return;
+		let e = new Set(Z.map((e) => e.value)), t = j.filter((t) => !e.has(t));
+		if (!t.length) return;
+		let n = new AbortController(), r = ++Ie.current;
+		async function i() {
+			let e = await m?.(t, n.signal);
+			!n.signal.aborted && r === Ie.current && e && V((t) => d(t, e));
+		}
+		return i(), () => {
+			n.abort();
+		};
+	}, [
+		Z,
+		m,
+		M,
+		j
+	]), a.useEffect(() => {
+		if (!P) return;
+		if ($) {
+			z(N), U(!1), K(!1);
+			return;
+		}
+		let e = _ ? pe(q.current, Y, v) : void 0;
+		if (e) {
+			z(e), U(!1), K(!1);
+			return;
+		}
+		let t = new AbortController(), n = ++J.current;
+		async function r() {
+			U(!0), K(!1);
+			try {
+				let e = le(await fe(Y, t.signal));
+				!t.signal.aborted && n === J.current && (_ && me(q.current, Y, e), z(e));
+			} catch {
+				!t.signal.aborted && n === J.current && (K(!0), z([]));
+			} finally {
+				!t.signal.aborted && n === J.current && U(!1);
+			}
+		}
+		return r(), () => {
+			t.abort();
+		};
+	}, [
+		_,
+		v,
+		fe,
+		P,
+		N,
+		Y,
+		$
+	]);
+	let Je = (e, t) => {
+		u?.(e, f(e, t));
+	}, Ye = (e) => {
+		Je(j.filter((t) => t !== e), Z);
+	}, Xe = (e) => {
+		e.disabled || (Je(Le.has(e.value) ? j.filter((t) => t !== e.value) : Ve ? j : [...j, e.value], d(Z, [e])), y && (F(!1), L("")));
+	}, Ze = (e, n) => {
+		e.key !== "Enter" && e.key !== " " && e.key !== "Backspace" && e.key !== "Delete" || (e.preventDefault(), t(e), Ye(n.value));
+	}, Qe = (e) => {
+		if (!g) {
+			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), F(!0);
+				return;
+			}
+			I.length > 0 || j.length === 0 || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), Ye(j[j.length - 1]));
+		}
+	}, $e = () => {
+		if (!We.length) return;
+		let e = typeof x == "number" ? Math.max(x - j.length, 0) : We.length, t = We.slice(0, e);
+		Je(Array.from(new Set([...j, ...t.map((e) => e.value)])), d(Z, t));
+	}, et = (e) => {
+		Ye(e.value);
+	}, tt = () => {
+		u?.([], []), L("");
+	}, nt = (e) => {
+		t(e), tt();
+	}, rt = async () => {
+		if (!(!C || !I.trim() || $)) {
+			W(!0);
+			try {
+				let e = await C(I.trim()), t = he(I), n = d(Z, [e]), r = Le.has(e.value) || Ve ? j : [...j, e.value];
+				z((t) => [{ options: [e] }, ...t]), _ && t && me(q.current, t, [{ options: [e] }]), Je(r, n), L(""), y && F(!1);
+			} finally {
+				W(!1);
+			}
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "async-multi-select",
+		className: e("w-full", ne),
+		...Ne,
+		children: /* @__PURE__ */ c(i, {
+			open: P,
+			onOpenChange: F,
+			children: [/* @__PURE__ */ c(te, {
+				render: /* @__PURE__ */ s(n, {
+					type: "button",
+					variant: "outline",
+					disabled: g,
+					"aria-expanded": P,
+					"aria-invalid": A || void 0,
+					"data-slot": "async-select-trigger",
+					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", T),
+					onKeyDown: Qe
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "flex min-w-0 flex-1 flex-wrap gap-1 text-left",
+					children: Re.length > 0 ? /* @__PURE__ */ c(o, { children: [Ke.map((n) => /* @__PURE__ */ c("span", {
+						"data-slot": "async-select-tag",
+						className: e("inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground", k),
+						children: [/* @__PURE__ */ c("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ s("span", {
+								className: "truncate",
+								children: Te?.(n, { remove: () => et(n) }) ?? we?.(n) ?? n.label
+							}), Me && (n.description || n.disabled && n.disabledReason) ? /* @__PURE__ */ s("span", {
+								className: "truncate text-[11px] text-muted-foreground",
+								children: n.description ?? n.disabledReason
+							}) : null]
+						}), !g && /* @__PURE__ */ s("span", {
+							role: "button",
+							tabIndex: 0,
+							"data-slot": "async-select-tag-remove",
+							className: "rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground",
+							"aria-label": `Remove ${ge(n)}`,
+							onClick: (e) => {
+								t(e), et(n);
+							},
+							onKeyDown: (e) => Ze(e, n),
+							children: /* @__PURE__ */ s(se, { className: "size-3" })
+						})]
+					}, n.value)), qe > 0 ? /* @__PURE__ */ s("span", {
+						"data-slot": "async-select-tag-overflow",
+						className: e("inline-flex max-w-full items-center rounded-[var(--radius-sm)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] px-2 py-1 text-xs font-medium text-muted-foreground", k),
+						children: S?.hiddenSelected?.(qe) ?? `+${qe} more`
+					}) : null] }) : /* @__PURE__ */ s("span", {
+						className: "truncate text-muted-foreground",
+						children: S?.multiPlaceholder ?? S?.placeholder ?? "Select"
+					})
+				}), /* @__PURE__ */ c("span", {
+					className: "ml-2 flex shrink-0 items-center gap-1",
+					children: [Be && /* @__PURE__ */ s("span", {
+						role: "button",
+						tabIndex: 0,
+						"data-slot": "async-select-clear",
+						className: "rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground",
+						"aria-label": S?.clearAll ?? S?.clear ?? "Clear all",
+						onClick: nt,
+						onKeyDown: (e) => {
+							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), tt());
+						},
+						children: /* @__PURE__ */ s(se, { className: "size-3.5" })
+					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
+				})]
+			}), /* @__PURE__ */ c(ee, {
+				align: "start",
+				"data-slot": "async-select-content",
+				className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", E),
+				children: [
+					/* @__PURE__ */ c("div", {
+						"data-slot": "async-select-search-wrap",
+						className: "relative",
+						children: [/* @__PURE__ */ s(oe, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ s(r, {
+							"data-slot": "async-select-search",
+							value: I,
+							onChange: (e) => L(e.target.value),
+							placeholder: S?.searchPlaceholder ?? "Search...",
+							className: e("pl-8", D)
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						"data-slot": "async-select-meta",
+						className: "flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground",
+						children: [
+							ze && S?.selectedCount && /* @__PURE__ */ s("span", { children: S.selectedCount(j.length) }),
+							Ve && (Ae?.(Q) ?? /* @__PURE__ */ s("span", { children: S?.maxSelected?.(x ?? j.length) ?? `Maximum ${x} selected` })),
+							/* @__PURE__ */ c("div", {
+								className: "ml-auto flex items-center gap-2",
+								children: [Ge && /* @__PURE__ */ s("button", {
+									type: "button",
+									"data-slot": "async-select-meta-action",
+									className: "rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
+									onClick: $e,
+									children: S?.selectAll ?? "Select all"
+								}), Be && /* @__PURE__ */ s("button", {
+									type: "button",
+									"data-slot": "async-select-meta-action",
+									className: "rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
+									onClick: () => u?.([], []),
+									children: S?.clearAll ?? S?.clear ?? "Clear all"
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "max-h-72 space-y-1 overflow-y-auto pr-1",
+						children: [
+							$ && X.length === 0 && (ke?.(Q) ?? /* @__PURE__ */ s(p, { children: S?.minSearchLength?.(b) ?? `Type at least ${b} characters` })),
+							H && (Ee?.(Q) ?? /* @__PURE__ */ s(p, { children: /* @__PURE__ */ c("span", {
+								className: "inline-flex items-center gap-2",
+								children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), S?.loading ?? "Loading..."]
+							}) })),
+							!H && G && (Oe?.(Q) ?? /* @__PURE__ */ s(p, {
+								className: "text-destructive",
+								children: S?.error ?? "Could not load options"
+							})),
+							!H && !G && !$ && X.length === 0 && !Ue && (De?.(Q) ?? /* @__PURE__ */ s(p, { children: S?.empty ?? "No options found" })),
+							!H && !G && Ue && /* @__PURE__ */ s(ve, {
+								search: I,
+								isCreating: Fe,
+								label: je,
+								onCreate: rt
+							}),
+							!H && !G && R.map((e, t) => /* @__PURE__ */ c("div", { children: [e.label && /* @__PURE__ */ s("div", {
+								className: "sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground",
+								children: /* @__PURE__ */ s("span", {
+									"data-slot": "async-select-group-label",
+									children: e.label
+								})
+							}), e.options.map((e) => /* @__PURE__ */ s(_e, {
+								option: e,
+								selected: Le.has(e.value),
+								renderOption: Ce,
+								optionClassName: O,
+								onSelect: Xe
+							}, e.value))] }, t))
+						]
+					})
+				]
+			})]
+		})
+	});
+}
+function g(e) {
+	return e.isMulti ? /* @__PURE__ */ s(h, { ...e }) : /* @__PURE__ */ s(m, { ...e });
+}
+//#endregion
+export { h as AsyncMultiSelect, g as AsyncSelect };

package/dist/src/components/inputs/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`password-input`,`PasswordInput`,`inputs`,`Password field with visibility toggle and secure autocomplete defaults.`),e.component(`number-input`,`NumberInput`,`inputs`,`Numeric entry surface for counts, thresholds and dashboard filters.`),e.component(`phone-input`,`PhoneInput`,`inputs`,`Masked phone entry that preserves stable value handling in forms.`),e.component(`money-input`,`MoneyInput`,`inputs`,`Currency-focused value entry for invoices, pricing and finance screens.`),e.component(`date-input`,`DateInput`,`inputs`,`Single-date entry with normalized string value handling.`),e.component(`date-range-input`,`DateRangeInput`,`inputs`,`Range-based date entry for reporting, booking and filter flows.`),e.component(`simple-select`,`SimpleSelect`,`inputs`,`Static select member for local option sets and lightweight filter panels.`),e.component(`async-select`,`AsyncSelect`,`inputs`,`Remote select member for server search, hydration and large datasets.`),e.component(`combobox`,`Combobox`,`inputs`,`Local searchable choice input for reassignment and command-like selection.`),e.component(`slider`,`Slider`,`inputs`,`Single value range control for density, threshold, and score tuning.`),e.component(`range-slider`,`RangeSlider`,`inputs`,`Two-handle slider for min/max filtering.`),e.component(`rating`,`Rating`,`inputs`,`Compact score input for feedback and review flows.`),e.component(`otp-input`,`OtpInput`,`inputs`,`One-time code entry with fixed-length slots.`),e.component(`color-input`,`ColorInput`,`inputs`,`Theme and accent color field with native color selection.`),e.component(`inline-editable`,`InlineEditable`,`inputs`,`Inline text editing for compact dashboards and settings tables.`),e.component(`tag-input`,`TagInput`,`inputs`,`Tokenized text input for labels, skills, and quick filters.`)]);exports.inputsShowcaseDemoRegistry=t;