tembro 3.1.1 → 3.1.5

package/dist/src/components/form/form-field-shell.js

@@ -18,17 +18,17 @@ var o = {
 	inline: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4"
 };
 function s({ className: a, label: s, description: c, error: l, success: u, loading: d = !1, required: f = !1, htmlFor: p, labelId: m, descriptionId: h, errorId: g, layout: _ = "vertical", descriptionPosition: v = "top", labelAction: y, requiredIndicator: b = /* @__PURE__ */ r("span", {
-	className: "ml-1 text-destructive",
+	"data-slot": "form-field-required",
 	children: "*"
 }), errorIcon: x, showErrorIcon: S = !0, disabled: C = !1, readOnly: w = !1, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, children: A, ...j }) {
-	let M = !!(s || y), N = c && v === "top", P = c && v === "bottom", F = x ?? /* @__PURE__ */ r(t, { className: "size-3.5" }), I = M ? /* @__PURE__ */ i("div", {
+	let M = !!(s || y), N = c && v === "top", P = c && v === "bottom", F = x ?? /* @__PURE__ */ r(t, { "data-icon": "error" }), I = M ? /* @__PURE__ */ i("div", {
 		"data-slot": "form-field-label-row",
 		className: e("flex min-w-0 items-center justify-between gap-3", _ === "inline" && "sm:w-auto", E),
 		children: [s ? /* @__PURE__ */ i("label", {
 			"data-slot": "form-field-label",
 			htmlFor: p,
 			id: m,
-			className: e("min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground", C && "cursor-not-allowed opacity-60", w && "opacity-80", T),
+			className: e("min-w-0", T),
 			children: [s, f && b]
 		}) : /* @__PURE__ */ r("span", {}), y && /* @__PURE__ */ r("div", {
 			"data-slot": "form-field-label-action",
@@ -38,20 +38,21 @@ function s({ className: a, label: s, description: c, error: l, success: u, loadi
 	}) : null, L = c ? /* @__PURE__ */ r("p", {
 		"data-slot": "form-field-description",
 		id: h,
-		className: e("text-sm leading-6 text-muted-foreground", C && "opacity-60", D),
+		className: D,
 		children: c
 	}) : null, R = /* @__PURE__ */ r("div", {
 		"data-slot": "form-field-content",
-		className: e("min-w-0 space-y-2", k),
+		className: e("flex min-w-0 flex-col gap-2", k),
 		children: A
 	}), z = l ? /* @__PURE__ */ i("p", {
 		"data-slot": "form-field-error",
 		id: g,
 		role: "alert",
 		"aria-live": "polite",
-		className: e("flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive", O),
+		className: e("flex items-start gap-2", O),
 		children: [S && /* @__PURE__ */ r("span", {
-			className: "mt-1 shrink-0",
+			"data-slot": "form-field-error-icon",
+			className: "shrink-0",
 			children: F
 		}), /* @__PURE__ */ r("span", {
 			className: "min-w-0",
@@ -59,11 +60,9 @@ function s({ className: a, label: s, description: c, error: l, success: u, loadi
 		})]
 	}) : null, B = u && !l ? /* @__PURE__ */ r("p", {
 		"data-slot": "form-field-success",
-		className: "rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300",
 		children: u
 	}) : null, V = d ? /* @__PURE__ */ r("p", {
 		"data-slot": "form-field-loading",
-		className: "text-sm leading-6 text-muted-foreground",
 		children: "Loading..."
 	}) : null;
 	return /* @__PURE__ */ r("div", {
@@ -75,7 +74,7 @@ function s({ className: a, label: s, description: c, error: l, success: u, loadi
 		"data-disabled": C || void 0,
 		"data-readonly": w || void 0,
 		"aria-disabled": C || void 0,
-		className: e(o[_], "rounded-[var(--radius-2xl)]", a),
+		className: e(o[_], a),
 		...j,
 		children: _ === "horizontal" ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("div", {
 			className: "grid gap-2 sm:pt-2.5",

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

@@ -1 +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;
+"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:t}){return(0,s.jsx)(`div`,{"data-slot":`async-select-state`,className:e,children:t})}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 text-left outline-none disabled:pointer-events-none`,i),onClick:()=>a(e),children:[(0,s.jsx)(`span`,{"data-slot":`async-select-option-indicator`,"data-selected":n||void 0,className:`mt-0.5 shrink-0`,children:n&&(0,s.jsx)(o.CheckIcon,{"data-icon":`selected`})}),(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 text-left outline-none disabled:pointer-events-none`,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(`w-full justify-between 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,"data-slot":`async-select-clear`,"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,{"data-icon":`clear`})}),(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`,ye),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{"data-slot":`async-select-search-icon`}),(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:`flex max-h-72 flex-col gap-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,{"data-tone":`danger`,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`,{"data-slot":`async-select-group-label`,className:`sticky top-0`,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(`w-full justify-between 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`,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`,"aria-label":`Remove ${se(e)}`,onClick:n=>{t.stopInteractivePropagation(n),Ke(e)},onKeyDown:t=>Ue(t,e),children:(0,s.jsx)(o.XIcon,{"data-icon":`remove`})})]},e.value)),ze>0?(0,s.jsx)(`span`,{"data-slot":`async-select-tag-overflow`,className:t.cn(`inline-flex max-w-full items-center`,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`,"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,{"data-icon":`clear`})}),(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`,E),children:[(0,s.jsxs)(`div`,{"data-slot":`async-select-search-wrap`,className:`relative`,children:[(0,s.jsx)(o.SearchIcon,{"data-slot":`async-select-search-icon`}),(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`,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`,onClick:Ge,children:w?.selectAll??`Select all`}),Ne&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,onClick:()=>u?.([],[]),children:w?.clearAll??w?.clear??`Clear all`})]})]}),(0,s.jsxs)(`div`,{className:`flex max-h-72 flex-col gap-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,{"data-tone":`danger`,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){if(e.isMulti){let{isMulti:t,...n}=e;return(0,s.jsx)(h,{"data-multi":t,...n})}return(0,s.jsx)(m,{...e})}exports.AsyncMultiSelect=h,exports.AsyncSelect=g;

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

@@ -70,11 +70,11 @@ function me(e, t, n) {
 function he(e) {
 	return e.trim().toLowerCase();
 }
-function p({ className: t, children: n }) {
+function p({ className: e, children: t }) {
 	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
+		className: e,
+		children: t
 	});
 }
 function ge(e) {
@@ -87,11 +87,13 @@ function _e({ option: t, selected: n, renderOption: r, optionClassName: i, onSel
 		"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),
+		className: e("flex w-full items-start gap-2.5 text-left outline-none disabled:pointer-events-none", 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" })
+			"data-slot": "async-select-option-indicator",
+			"data-selected": n || void 0,
+			className: "mt-0.5 shrink-0",
+			children: n && /* @__PURE__ */ s(ne, { "data-icon": "selected" })
 		}), /* @__PURE__ */ s("span", {
 			className: "min-w-0 flex-1",
 			children: r?.(t, { selected: n }) ?? /* @__PURE__ */ c("span", {
@@ -119,7 +121,7 @@ function ve({ search: e, isCreating: t, label: n, onCreate: r }) {
 		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",
+		className: "flex w-full items-center gap-2 text-left outline-none disabled:pointer-events-none",
 		onClick: r,
 		children: [/* @__PURE__ */ s("span", {
 			className: "flex size-4 shrink-0 items-center justify-center",
@@ -233,7 +235,7 @@ function m(ne) {
 					"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),
+					className: e("w-full justify-between text-left", De),
 					onKeyDown: Ie
 				}),
 				children: [/* @__PURE__ */ s("span", {
@@ -256,23 +258,23 @@ function m(ne) {
 					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",
+						"data-slot": "async-select-clear",
 						"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" })
+						children: /* @__PURE__ */ s(se, { "data-icon": "clear" })
 					}), /* @__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),
+				className: e("w-(--anchor-width) min-w-72 gap-3", 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, {
+					children: [/* @__PURE__ */ s(oe, { "data-slot": "async-select-search-icon" }), /* @__PURE__ */ s(r, {
 						"data-slot": "async-select-search",
 						value: D,
 						onChange: (e) => O(e.target.value),
@@ -280,7 +282,7 @@ function m(ne) {
 						className: e("pl-8", ke)
 					})]
 				}), /* @__PURE__ */ c("div", {
-					className: "max-h-72 space-y-1 overflow-y-auto pr-1",
+					className: "flex max-h-72 flex-col gap-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", {
@@ -288,7 +290,7 @@ function m(ne) {
 							children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), y?.loading ?? "Loading..."]
 						}) })),
 						!M && F && (Se?.(H) ?? /* @__PURE__ */ s(p, {
-							className: "text-destructive",
+							"data-tone": "danger",
 							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" })),
@@ -299,7 +301,8 @@ function m(ne) {
 							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",
+							"data-slot": "async-select-group-label",
+							className: "sticky top-0",
 							children: e.label
 						}), e.options.map((e) => /* @__PURE__ */ s(_e, {
 							option: e,
@@ -441,14 +444,14 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 					"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),
+					className: e("w-full justify-between 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),
+						className: e("inline-flex max-w-full items-center gap-1.5", k),
 						children: [/* @__PURE__ */ c("span", {
 							className: "flex min-w-0 flex-col",
 							children: [/* @__PURE__ */ s("span", {
@@ -462,17 +465,16 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 							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" })
+							children: /* @__PURE__ */ s(se, { "data-icon": "remove" })
 						})]
 					}, 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),
+						className: e("inline-flex max-w-full items-center", k),
 						children: S?.hiddenSelected?.(qe) ?? `+${qe} more`
 					}) : null] }) : /* @__PURE__ */ s("span", {
 						className: "truncate text-muted-foreground",
@@ -484,24 +486,23 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 						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" })
+						children: /* @__PURE__ */ s(se, { "data-icon": "clear" })
 					}), /* @__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),
+				className: e("w-(--anchor-width) min-w-72 gap-3", 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, {
+						children: [/* @__PURE__ */ s(oe, { "data-slot": "async-select-search-icon" }), /* @__PURE__ */ s(r, {
 							"data-slot": "async-select-search",
 							value: I,
 							onChange: (e) => L(e.target.value),
@@ -511,7 +512,7 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 					}),
 					/* @__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",
+						className: "flex flex-wrap items-center justify-between gap-2",
 						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` })),
@@ -520,13 +521,11 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 								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"
 								})]
@@ -534,7 +533,7 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 						]
 					}),
 					/* @__PURE__ */ c("div", {
-						className: "max-h-72 space-y-1 overflow-y-auto pr-1",
+						className: "flex max-h-72 flex-col gap-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", {
@@ -542,7 +541,7 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 								children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), S?.loading ?? "Loading..."]
 							}) })),
 							!H && G && (Oe?.(Q) ?? /* @__PURE__ */ s(p, {
-								className: "text-destructive",
+								"data-tone": "danger",
 								children: S?.error ?? "Could not load options"
 							})),
 							!H && !G && !$ && X.length === 0 && !Ue && (De?.(Q) ?? /* @__PURE__ */ s(p, { children: S?.empty ?? "No options found" })),
@@ -573,7 +572,14 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 	});
 }
 function g(e) {
-	return e.isMulti ? /* @__PURE__ */ s(h, { ...e }) : /* @__PURE__ */ s(m, { ...e });
+	if (e.isMulti) {
+		let { isMulti: t, ...n } = e;
+		return /* @__PURE__ */ s(h, {
+			"data-multi": t,
+			...n
+		});
+	}
+	return /* @__PURE__ */ s(m, { ...e });
 }
 //#endregion
 export { h as AsyncMultiSelect, g as AsyncSelect };

package/dist/src/components/inputs/color-picker.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");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=/^#?([0-9a-f]{6})([0-9a-f]{2})?$/i;function a(e,t=`#000000`){let n=e.trim().match(i);return n?`#${n[1].toLowerCase()}${n[2]?.toLowerCase()??``}`:t}function o(e){return a(e).slice(0,7)}function s(e){let t=a(e);return t.length===9?Math.round(Number.parseInt(t.slice(7,9),16)/255*100):100}function c(e,t,n){let r=o(e);return n?`${r}${Math.round(Math.min(100,Math.max(0,t))/100*255).toString(16).padStart(2,`0`)}`:r}function l({value:e,defaultValue:a=`#2563eb`,onValueChange:l,swatches:u=[`#0f172a`,`#2563eb`,`#059669`,`#d97706`,`#dc2626`,`#7c3aed`],showAlpha:d=!1,disabled:f=!1,label:p,labels:m,className:h,...g}){let[_,v]=n.useState(()=>c(a,s(a),d)),y=c(e??_,s(e??_),d),[b,x]=n.useState(y);n.useEffect(()=>x(y),[y]);let S=t=>{let n=c(t,s(t),d);e===void 0&&v(n),l?.(n)},C=()=>{if(!i.test(b.trim())){x(y);return}S(b)};return(0,r.jsxs)(`div`,{"data-slot":`color-picker`,className:t.cn(`grid gap-3`,h),...g,children:[p?(0,r.jsx)(`div`,{className:`text-sm font-medium text-foreground`,children:p}):null,(0,r.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,r.jsxs)(`label`,{className:`relative size-10 shrink-0 overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring`,children:[(0,r.jsx)(`span`,{className:`sr-only`,children:m?.color??`Choose color`}),(0,r.jsx)(`input`,{type:`color`,"aria-label":m?.color??`Choose color`,value:o(y),disabled:f,className:`absolute -inset-2 size-14 cursor-pointer border-0 bg-transparent p-0 disabled:cursor-not-allowed`,onChange:e=>S(c(e.target.value,s(y),d))})]}),(0,r.jsx)(`input`,{"aria-label":m?.hex??`Hex color`,value:b,disabled:f,spellCheck:!1,className:`h-10 min-w-0 flex-1 rounded-md border bg-background px-3 font-mono text-sm uppercase outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50`,onChange:e=>x(e.target.value),onBlur:C,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),C()),e.key===`Escape`&&x(y)}})]}),d?(0,r.jsxs)(`label`,{className:`grid grid-cols-[1fr_auto] items-center gap-3 text-xs text-muted-foreground`,children:[(0,r.jsx)(`span`,{className:`sr-only`,children:m?.alpha??`Opacity`}),(0,r.jsx)(`input`,{type:`range`,min:`0`,max:`100`,value:s(y),disabled:f,"aria-label":m?.alpha??`Opacity`,className:`w-full accent-foreground disabled:cursor-not-allowed`,onChange:e=>S(c(y,Number(e.target.value),!0))}),(0,r.jsxs)(`span`,{className:`w-10 text-right tabular-nums`,children:[s(y),`%`]})]}):null,u.length>0?(0,r.jsx)(`div`,{role:`list`,"aria-label":`Color swatches`,className:`flex flex-wrap gap-2`,children:u.map(e=>{let t=c(e,s(y),d),n=o(t)===o(y);return(0,r.jsx)(`button`,{type:`button`,role:`listitem`,"aria-label":`Use ${e}`,"aria-pressed":n,disabled:f,className:`size-7 rounded-md border border-black/10 shadow-sm outline-none ring-offset-2 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50`,style:{backgroundColor:o(t)},onClick:()=>S(t)},e)})}):null]})}exports.ColorPicker=l,exports.getAlphaPercent=s,exports.normalizeHexColor=a,exports.withAlpha=c;

package/dist/src/components/inputs/color-picker.js

@@ -0,0 +1,124 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/inputs/color-picker.tsx
+var i = /^#?([0-9a-f]{6})([0-9a-f]{2})?$/i;
+function a(e, t = "#000000") {
+	let n = e.trim().match(i);
+	return n ? `#${n[1].toLowerCase()}${n[2]?.toLowerCase() ?? ""}` : t;
+}
+function o(e) {
+	return a(e).slice(0, 7);
+}
+function s(e) {
+	let t = a(e);
+	return t.length === 9 ? Math.round(Number.parseInt(t.slice(7, 9), 16) / 255 * 100) : 100;
+}
+function c(e, t, n) {
+	let r = o(e);
+	return n ? `${r}${Math.round(Math.min(100, Math.max(0, t)) / 100 * 255).toString(16).padStart(2, "0")}` : r;
+}
+function l({ value: a, defaultValue: l = "#2563eb", onValueChange: u, swatches: d = [
+	"#0f172a",
+	"#2563eb",
+	"#059669",
+	"#d97706",
+	"#dc2626",
+	"#7c3aed"
+], showAlpha: f = !1, disabled: p = !1, label: m, labels: h, className: g, ..._ }) {
+	let [v, y] = t.useState(() => c(l, s(l), f)), b = c(a ?? v, s(a ?? v), f), [x, S] = t.useState(b);
+	t.useEffect(() => S(b), [b]);
+	let C = (e) => {
+		let t = c(e, s(e), f);
+		a === void 0 && y(t), u?.(t);
+	}, w = () => {
+		if (!i.test(x.trim())) {
+			S(b);
+			return;
+		}
+		C(x);
+	};
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "color-picker",
+		className: e("grid gap-3", g),
+		..._,
+		children: [
+			m ? /* @__PURE__ */ n("div", {
+				className: "text-sm font-medium text-foreground",
+				children: m
+			}) : null,
+			/* @__PURE__ */ r("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ r("label", {
+					className: "relative size-10 shrink-0 overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring",
+					children: [/* @__PURE__ */ n("span", {
+						className: "sr-only",
+						children: h?.color ?? "Choose color"
+					}), /* @__PURE__ */ n("input", {
+						type: "color",
+						"aria-label": h?.color ?? "Choose color",
+						value: o(b),
+						disabled: p,
+						className: "absolute -inset-2 size-14 cursor-pointer border-0 bg-transparent p-0 disabled:cursor-not-allowed",
+						onChange: (e) => C(c(e.target.value, s(b), f))
+					})]
+				}), /* @__PURE__ */ n("input", {
+					"aria-label": h?.hex ?? "Hex color",
+					value: x,
+					disabled: p,
+					spellCheck: !1,
+					className: "h-10 min-w-0 flex-1 rounded-md border bg-background px-3 font-mono text-sm uppercase outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+					onChange: (e) => S(e.target.value),
+					onBlur: w,
+					onKeyDown: (e) => {
+						e.key === "Enter" && (e.preventDefault(), w()), e.key === "Escape" && S(b);
+					}
+				})]
+			}),
+			f ? /* @__PURE__ */ r("label", {
+				className: "grid grid-cols-[1fr_auto] items-center gap-3 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ n("span", {
+						className: "sr-only",
+						children: h?.alpha ?? "Opacity"
+					}),
+					/* @__PURE__ */ n("input", {
+						type: "range",
+						min: "0",
+						max: "100",
+						value: s(b),
+						disabled: p,
+						"aria-label": h?.alpha ?? "Opacity",
+						className: "w-full accent-foreground disabled:cursor-not-allowed",
+						onChange: (e) => C(c(b, Number(e.target.value), !0))
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "w-10 text-right tabular-nums",
+						children: [s(b), "%"]
+					})
+				]
+			}) : null,
+			d.length > 0 ? /* @__PURE__ */ n("div", {
+				role: "list",
+				"aria-label": "Color swatches",
+				className: "flex flex-wrap gap-2",
+				children: d.map((e) => {
+					let t = c(e, s(b), f), r = o(t) === o(b);
+					return /* @__PURE__ */ n("button", {
+						type: "button",
+						role: "listitem",
+						"aria-label": `Use ${e}`,
+						"aria-pressed": r,
+						disabled: p,
+						className: "size-7 rounded-md border border-black/10 shadow-sm outline-none ring-offset-2 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+						style: { backgroundColor: o(t) },
+						onClick: () => C(t)
+					}, e);
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as ColorPicker, s as getAlphaPercent, a as normalizeHexColor, c as withAlpha };

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

@@ -1 +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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`async-select`,`AsyncSelect`,`inputs`,`Remote select member for server search, hydration and large datasets.`),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;

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

@@ -1,15 +1,7 @@
 import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
 //#region src/components/inputs/demo.tsx
 var n = t([
-	e("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
-	e("number-input", "NumberInput", "inputs", "Numeric entry surface for counts, thresholds and dashboard filters."),
-	e("phone-input", "PhoneInput", "inputs", "Masked phone entry that preserves stable value handling in forms."),
-	e("money-input", "MoneyInput", "inputs", "Currency-focused value entry for invoices, pricing and finance screens."),
-	e("date-input", "DateInput", "inputs", "Single-date entry with normalized string value handling."),
-	e("date-range-input", "DateRangeInput", "inputs", "Range-based date entry for reporting, booking and filter flows."),
-	e("simple-select", "SimpleSelect", "inputs", "Static select member for local option sets and lightweight filter panels."),
 	e("async-select", "AsyncSelect", "inputs", "Remote select member for server search, hydration and large datasets."),
-	e("combobox", "Combobox", "inputs", "Local searchable choice input for reassignment and command-like selection."),
 	e("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
 	e("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
 	e("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs"),c=require("./color-picker.cjs"),l=require("./signature-pad.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.ColorPicker=c.ColorPicker,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.SignaturePad=l.SignaturePad,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker,exports.drawSignature=l.drawSignature,exports.getAlphaPercent=c.getAlphaPercent,exports.normalizeHexColor=c.normalizeHexColor,exports.withAlpha=c.withAlpha;

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

@@ -6,4 +6,6 @@ import { TagInput as o } from "./tag-input.js";
 import { InlineEditable as s } from "./inline-editable.js";
 import { JsonInput as c } from "./json-input.js";
 import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
-export { e as AsyncMultiSelect, t as AsyncSelect, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker };
+import { ColorPicker as f, getAlphaPercent as p, normalizeHexColor as m, withAlpha as h } from "./color-picker.js";
+import { SignaturePad as g, drawSignature as _ } from "./signature-pad.js";
+export { e as AsyncMultiSelect, t as AsyncSelect, f as ColorPicker, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, g as SignaturePad, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker, _ as drawSignature, p as getAlphaPercent, m as normalizeHexColor, h as withAlpha };

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs"),c=require("./color-picker.cjs"),l=require("./signature-pad.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.ColorPicker=c.ColorPicker,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.SignaturePad=l.SignaturePad,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker,exports.drawSignature=l.drawSignature,exports.getAlphaPercent=c.getAlphaPercent,exports.normalizeHexColor=c.normalizeHexColor,exports.withAlpha=c.withAlpha;

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

@@ -6,4 +6,6 @@ import { TagInput as o } from "./tag-input.js";
 import { InlineEditable as s } from "./inline-editable.js";
 import { JsonInput as c } from "./json-input.js";
 import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
-export { e as AsyncMultiSelect, t as AsyncSelect, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker };
+import { ColorPicker as f, getAlphaPercent as p, normalizeHexColor as m, withAlpha as h } from "./color-picker.js";
+import { SignaturePad as g, drawSignature as _ } from "./signature-pad.js";
+export { e as AsyncMultiSelect, t as AsyncSelect, f as ColorPicker, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, g as SignaturePad, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker, _ as drawSignature, p as getAlphaPercent, m as normalizeHexColor, h as withAlpha };

package/dist/src/components/inputs/signature-pad.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");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a(e,t,n){let r=e.getContext(`2d`);if(r){r.clearRect(0,0,e.width,e.height),r.fillStyle=n.backgroundColor,r.fillRect(0,0,e.width,e.height),r.strokeStyle=n.color,r.fillStyle=n.color,r.lineCap=`round`,r.lineJoin=`round`;for(let i of t)if(i.length!==0){if(i.length===1){let t=i[0];r.beginPath(),r.arc(t.x*e.width,t.y*e.height,n.lineWidth/2,0,Math.PI*2),r.fill();continue}r.beginPath(),i.forEach((t,n)=>{let i=t.x*e.width,a=t.y*e.height;n===0?r.moveTo(i,a):r.lineTo(i,a)}),r.lineWidth=n.lineWidth,r.stroke()}}}var o=n.forwardRef(function({value:e,defaultValue:o=[],onValueChange:s,onStrokeEnd:c,width:l=640,height:u=240,lineWidth:d=2.5,color:f=`#111827`,backgroundColor:p=`#ffffff`,disabled:m=!1,labels:h,className:g,..._},v){let y=n.useRef(null),b=n.useRef(null),[x,S]=n.useState(o),C=e??x,w=n.useCallback(t=>{e===void 0&&S(t),s?.(t)},[s,e]),T=n.useCallback(()=>w([]),[w]),E=n.useCallback(()=>w(C.slice(0,-1)),[C,w]);n.useImperativeHandle(v,()=>({clear:T,undo:E,toDataURL:(e=`image/png`,t)=>y.current?.toDataURL(e,t)??``}),[T,E]),n.useEffect(()=>{let e=y.current;e&&a(e,C,{color:f,lineWidth:d,backgroundColor:p})},[p,f,u,d,C,l]);let D=e=>{let t=e.currentTarget.getBoundingClientRect();return{x:Math.min(1,Math.max(0,(e.clientX-t.left)/Math.max(t.width,1))),y:Math.min(1,Math.max(0,(e.clientY-t.top)/Math.max(t.height,1))),pressure:e.pressure||.5}};return(0,i.jsxs)(`div`,{"data-slot":`signature-pad`,className:t.cn(`grid gap-2`,g),..._,children:[(0,i.jsx)(`canvas`,{ref:y,width:l,height:u,role:`img`,"aria-label":h?.canvas??`Signature pad`,"data-disabled":m||void 0,className:`w-full touch-none rounded-md border bg-white shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60`,style:{aspectRatio:`${l} / ${u}`},tabIndex:m?-1:0,onPointerDown:e=>{if(m)return;let t=[D(e)];b.current={base:C,stroke:t},e.currentTarget.setPointerCapture(e.pointerId),w([...C,t])},onPointerMove:e=>{let t=b.current;if(!t||m||!e.currentTarget.hasPointerCapture(e.pointerId))return;let n=[...t.stroke,D(e)];b.current={...t,stroke:n},w([...t.base,n])},onPointerUp:e=>{let t=b.current;t&&(b.current=null,e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),c?.(t.stroke))},onPointerCancel:()=>{b.current=null}}),(0,i.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,i.jsxs)(`button`,{type:`button`,disabled:m||C.length===0,className:`inline-flex h-9 items-center gap-2 rounded-md border bg-background px-3 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,onClick:E,children:[(0,i.jsx)(r.RotateCcwIcon,{className:`size-4`,"aria-hidden":`true`}),h?.undo??`Undo`]}),(0,i.jsxs)(`button`,{type:`button`,disabled:m||C.length===0,className:`inline-flex h-9 items-center gap-2 rounded-md border bg-background px-3 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,onClick:T,children:[(0,i.jsx)(r.Trash2Icon,{className:`size-4`,"aria-hidden":`true`}),h?.clear??`Clear`]})]})]})});exports.SignaturePad=o,exports.drawSignature=a;