tembro 3.1.16 → 4.0.0

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: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;
+"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/popover/index.cjs"),i=require("../ui/input/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 ie(e,t,n,r,i){if(e)return t?.value===e?t:i?.value===e?i:[...n,...r].find(t=>t.value===e)}function u(...e){let t=new Map;return e.forEach(e=>{e?.forEach(e=>{t.set(e.value,e)})}),Array.from(t.values())}function d(e,t){let n=new Map(t.map(e=>[e.value,e]));return e.map(e=>n.get(e)).filter(e=>!!e)}function ae(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 f(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:u,onValueChange:d,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:T,createOptionLabel:me,showCreateOption:he,showSelectedDescription:ge=!0,triggerClassName:_e,contentClassName:ve,searchClassName:ye,optionClassName:be,invalid:xe,...Se}=e,E=a.useMemo(()=>ne(h),[h]),Ce=a.useMemo(()=>c(E),[E]),[D,O]=a.useState(!1),[k,A]=a.useState(``),[we,j]=a.useState(E),[M,Te]=a.useState(null),[N,P]=a.useState(!1),[F,I]=a.useState(!1),[L,R]=a.useState(!1),z=a.useRef(new Map),B=a.useRef(0),Ee=a.useRef(0),V=ee(k,ue).trim(),H=a.useMemo(()=>c(we),[we]),U=a.useMemo(()=>({search:k,minSearchLength:b,options:H}),[H,b,k]),W=ie(l,u,H,Ce,M),De=_&&!!l&&!g,G=V.length<b,K=!G&&!!T&&(he??re)(k,H);a.useEffect(()=>{z.current.clear()},[se]),a.useEffect(()=>{j(E)},[E]),a.useEffect(()=>{if(!l||W||!m)return;let e=new AbortController,t=++Ee.current;async function n(){let n=await m?.(l,e.signal);!e.signal.aborted&&t===Ee.current&&Te(n??null)}return n(),()=>{e.abort()}},[W,m,l]),a.useEffect(()=>{if(!D)return;if(G){j(E),P(!1),R(!1);return}let e=v?ae(z.current,V,y):void 0;if(e){j(e),P(!1),R(!1);return}let t=new AbortController,n=++B.current;async function r(){P(!0),R(!1);try{let e=ne(await se(V,t.signal));!t.signal.aborted&&n===B.current&&(v&&f(z.current,V,e),j(e))}catch{!t.signal.aborted&&n===B.current&&(R(!0),j([]))}finally{!t.signal.aborted&&n===B.current&&P(!1)}}return r(),()=>{t.abort()}},[v,y,se,D,E,V,G]);let q=e=>{e.disabled||(d?.(e.value,e),O(!1),A(``))},J=()=>{d?.(void 0),A(``)},Oe=e=>{t.stopInteractivePropagation(e),J()},Y=e=>{if(!g){if(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `){e.preventDefault(),O(!0);return}(e.key===`Backspace`||e.key===`Delete`)&&l&&(e.preventDefault(),J())}},X=async()=>{if(!(!T||!k.trim()||G)){I(!0);try{let e=await T(k.trim()),t=oe(k);j(t=>[{options:[e]},...t]),v&&t&&f(z.current,t,[{options:[e]}]),d?.(e.value,e),A(``),O(!1)}finally{I(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-select`,className:t.cn(`w-full`,te),...Se,children:(0,s.jsxs)(r.Popover,{open:D,onOpenChange:O,children:[(0,s.jsxs)(r.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:g,"aria-expanded":D,"aria-invalid":xe||void 0,"data-slot":`async-select-trigger`,className:t.cn(`w-full justify-between text-left`,_e),onKeyDown:Y}),children:[(0,s.jsx)(`span`,{className:`min-w-0 flex-1 text-left`,children:W?(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?.(W)??W.label}),ge&&(W.description||W.disabled&&W.disabledReason)?(0,s.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:W.description??W.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:[De&&(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"data-slot":`async-select-clear`,"aria-label":x?.clear??`Clear`,onClick:Oe,onKeyDown:e=>{e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),t.stopInteractivePropagation(e),J())},children:(0,s.jsx)(o.XIcon,{"data-icon":`clear`})}),(0,s.jsx)(o.ChevronsUpDownIcon,{className:`size-4 opacity-60`})]})]}),(0,s.jsxs)(r.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) min-w-72 gap-3`,ve),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)(i.Input,{"data-slot":`async-select-search`,value:k,onChange:e=>A(e.target.value),placeholder:x?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,ye)})]}),(0,s.jsxs)(`div`,{className:`flex max-h-72 flex-col gap-1 overflow-y-auto pr-1`,children:[G&&H.length===0&&(pe?.(U)??(0,s.jsx)(p,{children:x?.minSearchLength?.(b)??`Type at least ${b} characters`})),N&&(de?.(U)??(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...`]})})),!N&&L&&(w?.(U)??(0,s.jsx)(p,{"data-tone":`danger`,children:x?.error??`Could not load options`})),!N&&!L&&!G&&H.length===0&&!K&&(fe?.(U)??(0,s.jsx)(p,{children:x?.empty??`No options found`})),!N&&!L&&K&&(0,s.jsx)(le,{search:k,isCreating:F,label:me,onCreate:X}),!N&&!L&&we.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:be,onSelect:q},e.value))]},t))]})]})]})})}function h({className:e,value:te,selectedOptions:l,onValueChange:ie,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:T,renderTag:me,renderLoading:he,renderEmpty:ge,renderError:_e,renderMinSearch:ve,renderMaxSelected:ye,onCreateOption:be,createOptionLabel:xe,showCreateOption:Se,showSelectedDescription:E=!0,triggerClassName:Ce,contentClassName:D,searchClassName:O,optionClassName:k,tagClassName:A,invalid:we,...j}){let M=a.useMemo(()=>te??[],[te]),Te=M.join(`|`),N=a.useMemo(()=>ne(g),[g]),P=a.useMemo(()=>c(N),[N]),[F,I]=a.useState(!1),[L,R]=a.useState(``),[z,B]=a.useState(N),[Ee,V]=a.useState([]),[H,U]=a.useState(!1),[W,De]=a.useState(!1),[G,K]=a.useState(!1),q=a.useRef(new Map),J=a.useRef(0),Oe=a.useRef(0),Y=ee(L,x).trim(),X=a.useMemo(()=>c(z),[z]),ke=a.useMemo(()=>new Set(M),[M]),Z=a.useMemo(()=>u(l,Ee,X,P),[P,X,Ee,l]),Ae=a.useMemo(()=>d(M,Z),[Z,M]),Q=a.useMemo(()=>({search:L,minSearchLength:S,options:X,selectedCount:M.length,maxSelected:C}),[X,C,S,L,M.length]),je=M.length>0,Me=v&&je&&!_,Ne=typeof C==`number`&&M.length>=C,Pe=Math.max(de??M.length,1),$=Y.length<S,Fe=!$&&!!be&&(Se??re)(L,X),Ie=X.filter(e=>!e.disabled).filter(e=>!ke.has(e.value)),Le=fe&&Ie.length>0&&!Ne,Re=Ae.slice(0,Pe),ze=Math.max(Ae.length-Re.length,0);a.useEffect(()=>{q.current.clear()},[m]),a.useEffect(()=>{B(N)},[N]),a.useEffect(()=>{if(!M.length||!h)return;let e=new Set(Z.map(e=>e.value)),t=M.filter(t=>!e.has(t));if(!t.length)return;let n=new AbortController,r=++Oe.current;async function i(){let e=await h?.(t,n.signal);!n.signal.aborted&&r===Oe.current&&e&&V(t=>u(t,e))}return i(),()=>{n.abort()}},[Z,h,Te,M]),a.useEffect(()=>{if(!F)return;if($){B(N),U(!1),K(!1);return}let e=y?ae(q.current,Y,ue):void 0;if(e){B(e),U(!1),K(!1);return}let t=new AbortController,n=++J.current;async function r(){U(!0),K(!1);try{let e=ne(await m(Y,t.signal));!t.signal.aborted&&n===J.current&&(y&&f(q.current,Y,e),B(e))}catch{!t.signal.aborted&&n===J.current&&(K(!0),B([]))}finally{!t.signal.aborted&&n===J.current&&U(!1)}}return r(),()=>{t.abort()}},[y,ue,m,F,N,Y,$]);let Be=(e,t)=>{ie?.(e,d(e,t))},Ve=e=>{Be(M.filter(t=>t!==e),Z)},He=e=>{e.disabled||(Be(ke.has(e.value)?M.filter(t=>t!==e.value):Ne?M:[...M,e.value],u(Z,[e])),b&&(I(!1),R(``)))},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(),I(!0);return}L.length>0||M.length===0||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),Ve(M[M.length-1]))}},Ge=()=>{if(!Ie.length)return;let e=typeof C==`number`?Math.max(C-M.length,0):Ie.length,t=Ie.slice(0,e);Be(Array.from(new Set([...M,...t.map(e=>e.value)])),u(Z,t))},Ke=e=>{Ve(e.value)},qe=()=>{ie?.([],[]),R(``)},Je=e=>{t.stopInteractivePropagation(e),qe()},Ye=async()=>{if(!(!be||!L.trim()||$)){De(!0);try{let e=await be(L.trim()),t=oe(L),n=u(Z,[e]),r=ke.has(e.value)||Ne?M:[...M,e.value];B(t=>[{options:[e]},...t]),y&&t&&f(q.current,t,[{options:[e]}]),Be(r,n),R(``),b&&I(!1)}finally{De(!1)}}};return(0,s.jsx)(`div`,{"data-slot":`async-multi-select`,className:t.cn(`w-full`,e),...j,children:(0,s.jsxs)(r.Popover,{open:F,onOpenChange:I,children:[(0,s.jsxs)(r.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:_,"aria-expanded":F,"aria-invalid":we||void 0,"data-slot":`async-select-trigger`,className:t.cn(`w-full justify-between text-left`,Ce),onKeyDown:We}),children:[(0,s.jsx)(`span`,{className:`flex min-w-0 flex-1 flex-wrap gap-1 text-left`,children:Ae.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`,A),children:[(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col`,children:[(0,s.jsx)(`span`,{className:`truncate`,children:me?.(e,{remove:()=>Ke(e)})??T?.(e)??e.label}),E&&(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`,A),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:[Me&&(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)(r.PopoverContent,{align:`start`,"data-slot":`async-select-content`,className:t.cn(`w-(--anchor-width) min-w-72 gap-3`,D),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)(i.Input,{"data-slot":`async-select-search`,value:L,onChange:e=>R(e.target.value),placeholder:w?.searchPlaceholder??`Search...`,className:t.cn(`pl-8`,O)})]}),(0,s.jsxs)(`div`,{"data-slot":`async-select-meta`,className:`flex flex-wrap items-center justify-between gap-2`,children:[je&&w?.selectedCount&&(0,s.jsx)(`span`,{children:w.selectedCount(M.length)}),Ne&&(ye?.(Q)??(0,s.jsx)(`span`,{children:w?.maxSelected?.(C??M.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`}),Me&&(0,s.jsx)(`button`,{type:`button`,"data-slot":`async-select-meta-action`,onClick:()=>ie?.([],[]),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:[$&&X.length===0&&(ve?.(Q)??(0,s.jsx)(p,{children:w?.minSearchLength?.(S)??`Type at least ${S} characters`})),H&&(he?.(Q)??(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...`]})})),!H&&G&&(_e?.(Q)??(0,s.jsx)(p,{"data-tone":`danger`,children:w?.error??`Could not load options`})),!H&&!G&&!$&&X.length===0&&!Fe&&(ge?.(Q)??(0,s.jsx)(p,{children:w?.empty??`No options found`})),!H&&!G&&Fe&&(0,s.jsx)(le,{search:L,isCreating:W,label:xe,onCreate:Ye}),!H&&!G&&z.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:ke.has(e.value),renderOption:pe,optionClassName:k,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

@@ -1,8 +1,8 @@
 "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 { Popover as r, PopoverContent as i, PopoverTrigger as ee } from "../ui/popover/index.js";
+import { Input as te } from "../ui/input/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";
@@ -224,10 +224,10 @@ function m(ne) {
 		"data-slot": "async-select",
 		className: e("w-full", ae),
 		...je,
-		children: /* @__PURE__ */ c(i, {
+		children: /* @__PURE__ */ c(r, {
 			open: T,
 			onOpenChange: E,
-			children: [/* @__PURE__ */ c(te, {
+			children: [/* @__PURE__ */ c(ee, {
 				render: /* @__PURE__ */ s(n, {
 					type: "button",
 					variant: "outline",
@@ -267,14 +267,14 @@ function m(ne) {
 						children: /* @__PURE__ */ s(se, { "data-icon": "clear" })
 					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
 				})]
-			}), /* @__PURE__ */ c(ee, {
+			}), /* @__PURE__ */ c(i, {
 				align: "start",
 				"data-slot": "async-select-content",
 				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, { "data-slot": "async-select-search-icon" }), /* @__PURE__ */ s(r, {
+					children: [/* @__PURE__ */ s(oe, { "data-slot": "async-select-search-icon" }), /* @__PURE__ */ s(te, {
 						"data-slot": "async-select-search",
 						value: D,
 						onChange: (e) => O(e.target.value),
@@ -433,10 +433,10 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 		"data-slot": "async-multi-select",
 		className: e("w-full", ne),
 		...Ne,
-		children: /* @__PURE__ */ c(i, {
+		children: /* @__PURE__ */ c(r, {
 			open: P,
 			onOpenChange: F,
-			children: [/* @__PURE__ */ c(te, {
+			children: [/* @__PURE__ */ c(ee, {
 				render: /* @__PURE__ */ s(n, {
 					type: "button",
 					variant: "outline",
@@ -494,7 +494,7 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 						children: /* @__PURE__ */ s(se, { "data-icon": "clear" })
 					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
 				})]
-			}), /* @__PURE__ */ c(ee, {
+			}), /* @__PURE__ */ c(i, {
 				align: "start",
 				"data-slot": "async-select-content",
 				className: e("w-(--anchor-width) min-w-72 gap-3", E),
@@ -502,7 +502,7 @@ function h({ className: ne, value: ae, selectedOptions: l, onValueChange: u, loa
 					/* @__PURE__ */ c("div", {
 						"data-slot": "async-select-search-wrap",
 						className: "relative",
-						children: [/* @__PURE__ */ s(oe, { "data-slot": "async-select-search-icon" }), /* @__PURE__ */ s(r, {
+						children: [/* @__PURE__ */ s(oe, { "data-slot": "async-select-search-icon" }), /* @__PURE__ */ s(te, {
 							"data-slot": "async-select-search",
 							value: I,
 							onChange: (e) => L(e.target.value),

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

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

@@ -1,11 +1,11 @@
 import { AsyncMultiSelect as e, AsyncSelect as t } from "./async-select.js";
-import { OtpInput as n } from "./otp-input.js";
-import { Rating as r } from "./rating.js";
-import { RangeSlider as i, Slider as a } from "./slider.js";
-import { TagInput as o } from "./tag-input.js";
-import { InlineEditable as s } from "./inline-editable.js";
+import { ColorPicker as n, getAlphaPercent as r, normalizeHexColor as i, withAlpha as a } from "./color-picker.js";
+import { OtpInput as o } from "./otp-input.js";
+import { Rating as s } from "./rating.js";
 import { JsonInput as c } from "./json-input.js";
 import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
-import { ColorPicker as f, getAlphaPercent as p, normalizeHexColor as m, withAlpha as h } from "./color-picker.js";
+import { RangeSlider as f, Slider as p } from "./slider.js";
+import { TagInput as m } from "./tag-input.js";
+import { InlineEditable as h } from "./inline-editable.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 };
+export { e as AsyncMultiSelect, t as AsyncSelect, n as ColorPicker, l as DateTimePicker, h as InlineEditable, c as JsonInput, o as OtpInput, f as RangeSlider, s as Rating, g as SignaturePad, p as Slider, m as TagInput, u as TimePicker, d as TimeRangePicker, _ as drawSignature, r as getAlphaPercent, i as normalizeHexColor, a 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"),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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./color-picker.cjs"),n=require("./otp-input.cjs"),r=require("./rating.cjs"),i=require("./json-input.cjs"),a=require("./time-picker.cjs"),o=require("./slider.cjs"),s=require("./tag-input.cjs"),c=require("./inline-editable.cjs"),l=require("./signature-pad.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.ColorPicker=t.ColorPicker,exports.DateTimePicker=a.DateTimePicker,exports.InlineEditable=c.InlineEditable,exports.JsonInput=i.JsonInput,exports.OtpInput=n.OtpInput,exports.RangeSlider=o.RangeSlider,exports.Rating=r.Rating,exports.SignaturePad=l.SignaturePad,exports.Slider=o.Slider,exports.TagInput=s.TagInput,exports.TimePicker=a.TimePicker,exports.TimeRangePicker=a.TimeRangePicker,exports.drawSignature=l.drawSignature,exports.getAlphaPercent=t.getAlphaPercent,exports.normalizeHexColor=t.normalizeHexColor,exports.withAlpha=t.withAlpha;

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

@@ -1,11 +1,11 @@
 import { AsyncMultiSelect as e, AsyncSelect as t } from "./async-select.js";
-import { OtpInput as n } from "./otp-input.js";
-import { Rating as r } from "./rating.js";
-import { RangeSlider as i, Slider as a } from "./slider.js";
-import { TagInput as o } from "./tag-input.js";
-import { InlineEditable as s } from "./inline-editable.js";
+import { ColorPicker as n, getAlphaPercent as r, normalizeHexColor as i, withAlpha as a } from "./color-picker.js";
+import { OtpInput as o } from "./otp-input.js";
+import { Rating as s } from "./rating.js";
 import { JsonInput as c } from "./json-input.js";
 import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
-import { ColorPicker as f, getAlphaPercent as p, normalizeHexColor as m, withAlpha as h } from "./color-picker.js";
+import { RangeSlider as f, Slider as p } from "./slider.js";
+import { TagInput as m } from "./tag-input.js";
+import { InlineEditable as h } from "./inline-editable.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 };
+export { e as AsyncMultiSelect, t as AsyncSelect, n as ColorPicker, l as DateTimePicker, h as InlineEditable, c as JsonInput, o as OtpInput, f as RangeSlider, s as Rating, g as SignaturePad, p as Slider, m as TagInput, u as TimePicker, d as TimeRangePicker, _ as drawSignature, r as getAlphaPercent, i as normalizeHexColor, a as withAlpha };

package/dist/src/components/inputs/tag-input.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/input/index.cjs"),r=require("../ui/badge/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({value:e,defaultValue:s=[],onValueChange:c,placeholder:l=`Add tag...`,disabled:u=!1,readOnly:d=!1,maxTags:f,allowDuplicates:p=!1,separators:m=[`,`,`Enter`],normalizeTag:h=e=>e.trim(),className:g,..._}){let v=e!==void 0,[y,b]=i.useState(s),[x,S]=i.useState(``),C=v?e:y,w=f!==void 0&&C.length>=f,T=i.useCallback(e=>{v||b(e),c?.(e)},[v,c]),E=i.useCallback(e=>{let t=h(e);t&&(f!==void 0&&C.length>=f||!p&&C.includes(t)||(T([...C,t]),S(``)))},[p,f,h,T,C]),D=i.useCallback(e=>{T(C.filter(t=>t!==e))},[T,C]);return(0,o.jsx)(`div`,{"data-slot":`tag-input`,className:t.cn(`grid gap-2`,g),..._,children:(0,o.jsxs)(`div`,{className:t.cn(`flex min-h-12 flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_78%,white_22%)] px-3 py-2.5 shadow-sm transition focus-within:border-[color:var(--aui-brand-strong)] focus-within:ring-4 focus-within:ring-[color:color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,u&&`opacity-60`,d&&`bg-muted/30`),children:[C.map(e=>(0,o.jsxs)(r.Badge,{variant:`secondary`,className:`h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm`,children:[e,!d&&!u&&(0,o.jsx)(`button`,{type:`button`,className:`inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground`,onClick:n=>{t.stopInteractivePropagation(n),D(e)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`})})]},e)),!d&&(0,o.jsx)(n.Input,{value:x,disabled:u||w,placeholder:l,className:`h-8 min-w-32 flex-1 border-0 bg-transparent px-1 text-sm shadow-none placeholder:text-[color:var(--aui-text-muted)] focus-visible:ring-0`,onChange:e=>S(e.target.value),onBlur:()=>E(x),onKeyDown:e=>{m.includes(e.key)&&(e.preventDefault(),E(x)),e.key===`Backspace`&&!x&&C.length&&D(C[C.length-1])}}),f!==void 0&&(0,o.jsxs)(`span`,{className:`ml-auto text-xs font-medium text-muted-foreground`,children:[C.length,`/`,f]})]})})}exports.TagInput=s;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/badge/index.cjs"),r=require("../ui/input/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({value:e,defaultValue:s=[],onValueChange:c,placeholder:l=`Add tag...`,disabled:u=!1,readOnly:d=!1,maxTags:f,allowDuplicates:p=!1,separators:m=[`,`,`Enter`],normalizeTag:h=e=>e.trim(),className:g,..._}){let v=e!==void 0,[y,b]=i.useState(s),[x,S]=i.useState(``),C=v?e:y,w=f!==void 0&&C.length>=f,T=i.useCallback(e=>{v||b(e),c?.(e)},[v,c]),E=i.useCallback(e=>{let t=h(e);t&&(f!==void 0&&C.length>=f||!p&&C.includes(t)||(T([...C,t]),S(``)))},[p,f,h,T,C]),D=i.useCallback(e=>{T(C.filter(t=>t!==e))},[T,C]);return(0,o.jsx)(`div`,{"data-slot":`tag-input`,className:t.cn(`grid gap-2`,g),..._,children:(0,o.jsxs)(`div`,{className:t.cn(`flex min-h-12 flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_78%,white_22%)] px-3 py-2.5 shadow-sm transition focus-within:border-[color:var(--aui-brand-strong)] focus-within:ring-4 focus-within:ring-[color:color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]`,u&&`opacity-60`,d&&`bg-muted/30`),children:[C.map(e=>(0,o.jsxs)(n.Badge,{variant:`secondary`,className:`h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm`,children:[e,!d&&!u&&(0,o.jsx)(`button`,{type:`button`,className:`inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground`,onClick:n=>{t.stopInteractivePropagation(n),D(e)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,o.jsx)(a.XIcon,{className:`size-3`})})]},e)),!d&&(0,o.jsx)(r.Input,{value:x,disabled:u||w,placeholder:l,className:`h-8 min-w-32 flex-1 border-0 bg-transparent px-1 text-sm shadow-none placeholder:text-[color:var(--aui-text-muted)] focus-visible:ring-0`,onChange:e=>S(e.target.value),onBlur:()=>E(x),onKeyDown:e=>{m.includes(e.key)&&(e.preventDefault(),E(x)),e.key===`Backspace`&&!x&&C.length&&D(C[C.length-1])}}),f!==void 0&&(0,o.jsxs)(`span`,{className:`ml-auto text-xs font-medium text-muted-foreground`,children:[C.length,`/`,f]})]})})}exports.TagInput=s;

package/dist/src/components/inputs/tag-input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
-import { Input as n } from "../ui/input/index.js";
-import { Badge as r } from "../ui/badge/index.js";
+import { Badge as n } from "../ui/badge/index.js";
+import { Input as r } from "../ui/input/index.js";
 import * as i from "react";
 import { XIcon as a } from "lucide-react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ function c({ value: c, defaultValue: l = [], onValueChange: u, placeholder: d =
 		children: /* @__PURE__ */ s("div", {
 			className: e("flex min-h-12 flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_78%,white_22%)] px-3 py-2.5 shadow-sm transition focus-within:border-[color:var(--aui-brand-strong)] focus-within:ring-4 focus-within:ring-[color:color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]", f && "opacity-60", p && "bg-muted/30"),
 			children: [
-				T.map((e) => /* @__PURE__ */ s(r, {
+				T.map((e) => /* @__PURE__ */ s(n, {
 					variant: "secondary",
 					className: "h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm",
 					children: [e, !p && !f && /* @__PURE__ */ o("button", {
@@ -42,7 +42,7 @@ function c({ value: c, defaultValue: l = [], onValueChange: u, placeholder: d =
 						children: /* @__PURE__ */ o(a, { className: "size-3" })
 					})]
 				}, e)),
-				!p && /* @__PURE__ */ o(n, {
+				!p && /* @__PURE__ */ o(r, {
 					value: C,
 					disabled: f || E,
 					placeholder: d,

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./app-sidebar.cjs"),t=require("./breadcrumbs.cjs"),n=require("./section.cjs"),r=require("./app-header.cjs");exports.AppHeader=r.AppHeader,exports.Breadcrumbs=t.Breadcrumbs,exports.Section=n.Section,exports.Sidebar=e.Sidebar,exports.SplitLayout=n.SplitLayout,exports.Toolbar=n.Toolbar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./breadcrumbs.cjs"),t=require("./workspace-header.cjs"),n=require("./sidebar-context.cjs"),r=require("./sidebar.cjs"),i=require("./section.cjs"),a=require("./workspace-layout.cjs");exports.Breadcrumbs=e.Breadcrumbs,exports.Section=i.Section,exports.Sidebar=r.Sidebar,exports.SidebarProvider=n.SidebarProvider,exports.SidebarTrigger=n.SidebarTrigger,exports.SplitLayout=i.SplitLayout,exports.Toolbar=i.Toolbar,exports.WorkspaceContent=a.WorkspaceContent,exports.WorkspaceHeader=t.WorkspaceHeader,exports.WorkspaceLayout=a.WorkspaceLayout,exports.WorkspaceMain=a.WorkspaceMain,exports.useSidebar=n.useSidebar;

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

@@ -1,5 +1,7 @@
-import { Sidebar as e } from "./app-sidebar.js";
-import { Breadcrumbs as t } from "./breadcrumbs.js";
-import { Section as n, SplitLayout as r, Toolbar as i } from "./section.js";
-import { AppHeader as a } from "./app-header.js";
-export { a as AppHeader, t as Breadcrumbs, n as Section, e as Sidebar, r as SplitLayout, i as Toolbar };
+import { Breadcrumbs as e } from "./breadcrumbs.js";
+import { WorkspaceHeader as t } from "./workspace-header.js";
+import { SidebarProvider as n, SidebarTrigger as r, useSidebar as i } from "./sidebar-context.js";
+import { Sidebar as a } from "./sidebar.js";
+import { Section as o, SplitLayout as s, Toolbar as c } from "./section.js";
+import { WorkspaceContent as l, WorkspaceLayout as u, WorkspaceMain as d } from "./workspace-layout.js";
+export { e as Breadcrumbs, o as Section, a as Sidebar, n as SidebarProvider, r as SidebarTrigger, s as SplitLayout, c as Toolbar, l as WorkspaceContent, t as WorkspaceHeader, u as WorkspaceLayout, d as WorkspaceMain, i as useSidebar };

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./app-sidebar.cjs"),t=require("./breadcrumbs.cjs"),n=require("./section.cjs");exports.Breadcrumbs=t.Breadcrumbs,exports.Section=n.Section,exports.Sidebar=e.Sidebar,exports.SplitLayout=n.SplitLayout,exports.Toolbar=n.Toolbar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./breadcrumbs.cjs"),t=require("./workspace-header.cjs"),n=require("./sidebar-context.cjs"),r=require("./sidebar.cjs"),i=require("./section.cjs"),a=require("./workspace-layout.cjs");exports.Breadcrumbs=e.Breadcrumbs,exports.Section=i.Section,exports.Sidebar=r.Sidebar,exports.SidebarProvider=n.SidebarProvider,exports.SidebarTrigger=n.SidebarTrigger,exports.SplitLayout=i.SplitLayout,exports.Toolbar=i.Toolbar,exports.WorkspaceContent=a.WorkspaceContent,exports.WorkspaceHeader=t.WorkspaceHeader,exports.WorkspaceLayout=a.WorkspaceLayout,exports.WorkspaceMain=a.WorkspaceMain,exports.useSidebar=n.useSidebar;

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

@@ -1,4 +1,7 @@
-import { Sidebar as e } from "./app-sidebar.js";
-import { Breadcrumbs as t } from "./breadcrumbs.js";
-import { Section as n, SplitLayout as r, Toolbar as i } from "./section.js";
-export { t as Breadcrumbs, n as Section, e as Sidebar, r as SplitLayout, i as Toolbar };
+import { Breadcrumbs as e } from "./breadcrumbs.js";
+import { WorkspaceHeader as t } from "./workspace-header.js";
+import { SidebarProvider as n, SidebarTrigger as r, useSidebar as i } from "./sidebar-context.js";
+import { Sidebar as a } from "./sidebar.js";
+import { Section as o, SplitLayout as s, Toolbar as c } from "./section.js";
+import { WorkspaceContent as l, WorkspaceLayout as u, WorkspaceMain as d } from "./workspace-layout.js";
+export { e as Breadcrumbs, o as Section, a as Sidebar, n as SidebarProvider, r as SidebarTrigger, s as SplitLayout, c as Toolbar, l as WorkspaceContent, t as WorkspaceHeader, u as WorkspaceLayout, d as WorkspaceMain, i as useSidebar };

package/dist/src/components/layout/section.cjs

@@ -1 +1 @@
-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");function i({title:e,description:n,actions:i,padded:a=!0,bordered:o=!1,className:s,children:c,...l}){return(0,r.jsxs)(`section`,{"data-slot":`section`,className:t.cn(`grid gap-4`,o&&`rounded-lg border bg-card`,a&&o&&`p-4`,s),...l,children:[(e||n||i)&&(0,r.jsxs)(`div`,{"data-slot":`section-header`,className:`flex flex-wrap items-start justify-between gap-3`,children:[(0,r.jsxs)(`div`,{className:`grid gap-1`,children:[e&&(0,r.jsx)(`h2`,{className:`text-lg font-semibold tracking-tight text-foreground`,children:e}),n&&(0,r.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:n})]}),i&&(0,r.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:i})]}),(0,r.jsx)(`div`,{"data-slot":`section-content`,children:c})]})}function a({title:e,description:n,filters:i,actions:a,className:o,children:s,...c}){return(0,r.jsxs)(`div`,{"data-slot":`toolbar`,className:t.cn(`flex flex-wrap items-center justify-between gap-3`,o),...c,children:[(e||n)&&(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[e&&(0,r.jsx)(`div`,{className:`font-medium text-foreground`,children:e}),n&&(0,r.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:n})]}),s,(i||a)&&(0,r.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[i,a]})]})}function o({aside:e,asidePosition:n=`end`,asideClassName:i,contentClassName:a,className:o,children:s,...c}){let l=(0,r.jsx)(`aside`,{"data-slot":`split-layout-aside`,className:t.cn(`min-w-0`,i),children:e}),u=(0,r.jsx)(`main`,{"data-slot":`split-layout-content`,className:t.cn(`min-w-0`,a),children:s});return(0,r.jsxs)(`div`,{"data-slot":`split-layout`,className:t.cn(`grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]`,n===`start`&&`lg:grid-cols-[320px_minmax(0,1fr)]`,o),...c,children:[n===`start`?l:u,n===`start`?u:l]})}exports.Section=i,exports.SplitLayout=o,exports.Toolbar=a;
+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={compact:`gap-2`,default:`gap-4`,comfortable:`gap-6`},a={compact:`p-3`,default:`p-4`,comfortable:`p-6`};function o({title:e,description:n,actions:o,padded:s=!0,bordered:c=!1,variant:l=c?`panel`:`plain`,density:u=`default`,headerClassName:d,bodyClassName:f,className:p,children:m,...h}){let g=l===`panel`;return(0,r.jsxs)(`section`,{"data-slot":`section`,"data-variant":l,"data-density":u,className:t.cn(`grid min-w-0`,i[u],g&&`rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-shadow-xs))]`,s&&g&&a[u],p),...h,children:[(e||n||o)&&(0,r.jsxs)(`div`,{"data-slot":`section-header`,className:t.cn(`flex flex-wrap items-start justify-between gap-3`,d),children:[(0,r.jsxs)(`div`,{className:`grid gap-1`,children:[e&&(0,r.jsx)(`h2`,{className:`text-lg font-semibold tracking-tight text-foreground`,children:e}),n&&(0,r.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:n})]}),o&&(0,r.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:o})]}),(0,r.jsx)(`div`,{"data-slot":`section-content`,className:f,children:m})]})}function s({title:e,description:n,filters:i,actions:a,className:o,children:s,...c}){return(0,r.jsxs)(`div`,{"data-slot":`toolbar`,className:t.cn(`flex flex-wrap items-center justify-between gap-3`,o),...c,children:[(e||n)&&(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[e&&(0,r.jsx)(`div`,{className:`font-medium text-foreground`,children:e}),n&&(0,r.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:n})]}),s,(i||a)&&(0,r.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[i,a]})]})}function c({aside:e,asidePosition:n=`end`,asideClassName:i,contentClassName:a,asideWidth:o=`20rem`,className:s,children:c,style:l,...u}){let d=(0,r.jsx)(`aside`,{"data-slot":`split-layout-aside`,className:t.cn(`min-w-0`,i),children:e}),f=(0,r.jsx)(`main`,{"data-slot":`split-layout-content`,className:t.cn(`min-w-0`,a),children:c});return(0,r.jsxs)(`div`,{"data-slot":`split-layout`,className:t.cn(`grid gap-4 lg:grid-cols-[minmax(0,1fr)_var(--split-aside-width)]`,n===`start`&&`lg:grid-cols-[var(--split-aside-width)_minmax(0,1fr)]`,s),style:{"--split-aside-width":o,...l},...u,children:[n===`start`?d:f,n===`start`?f:d]})}exports.Section=o,exports.SplitLayout=c,exports.Toolbar=s;

package/dist/src/components/layout/section.js

@@ -2,34 +2,47 @@ import { cn as e } from "../../lib/utils.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/layout/section.tsx
-function r({ title: r, description: i, actions: a, padded: o = !0, bordered: s = !1, className: c, children: l, ...u }) {
+var r = {
+	compact: "gap-2",
+	default: "gap-4",
+	comfortable: "gap-6"
+}, i = {
+	compact: "p-3",
+	default: "p-4",
+	comfortable: "p-6"
+};
+function a({ title: a, description: o, actions: s, padded: c = !0, bordered: l = !1, variant: u = l ? "panel" : "plain", density: d = "default", headerClassName: f, bodyClassName: p, className: m, children: h, ...g }) {
+	let _ = u === "panel";
 	return /* @__PURE__ */ n("section", {
 		"data-slot": "section",
-		className: e("grid gap-4", s && "rounded-lg border bg-card", o && s && "p-4", c),
-		...u,
-		children: [(r || i || a) && /* @__PURE__ */ n("div", {
+		"data-variant": u,
+		"data-density": d,
+		className: e("grid min-w-0", r[d], _ && "rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-shadow-xs))]", c && _ && i[d], m),
+		...g,
+		children: [(a || o || s) && /* @__PURE__ */ n("div", {
 			"data-slot": "section-header",
-			className: "flex flex-wrap items-start justify-between gap-3",
+			className: e("flex flex-wrap items-start justify-between gap-3", f),
 			children: [/* @__PURE__ */ n("div", {
 				className: "grid gap-1",
-				children: [r && /* @__PURE__ */ t("h2", {
+				children: [a && /* @__PURE__ */ t("h2", {
 					className: "text-lg font-semibold tracking-tight text-foreground",
-					children: r
-				}), i && /* @__PURE__ */ t("p", {
+					children: a
+				}), o && /* @__PURE__ */ t("p", {
 					className: "text-sm text-muted-foreground",
-					children: i
+					children: o
 				})]
-			}), a && /* @__PURE__ */ t("div", {
+			}), s && /* @__PURE__ */ t("div", {
 				className: "flex shrink-0 items-center gap-2",
-				children: a
+				children: s
 			})]
 		}), /* @__PURE__ */ t("div", {
 			"data-slot": "section-content",
-			children: l
+			className: p,
+			children: h
 		})]
 	});
 }
-function i({ title: r, description: i, filters: a, actions: o, className: s, children: c, ...l }) {
+function o({ title: r, description: i, filters: a, actions: o, className: s, children: c, ...l }) {
 	return /* @__PURE__ */ n("div", {
 		"data-slot": "toolbar",
 		className: e("flex flex-wrap items-center justify-between gap-3", s),
@@ -53,22 +66,26 @@ function i({ title: r, description: i, filters: a, actions: o, className: s, chi
 		]
 	});
 }
-function a({ aside: r, asidePosition: i = "end", asideClassName: a, contentClassName: o, className: s, children: c, ...l }) {
-	let u = /* @__PURE__ */ t("aside", {
+function s({ aside: r, asidePosition: i = "end", asideClassName: a, contentClassName: o, asideWidth: s = "20rem", className: c, children: l, style: u, ...d }) {
+	let f = /* @__PURE__ */ t("aside", {
 		"data-slot": "split-layout-aside",
 		className: e("min-w-0", a),
 		children: r
-	}), d = /* @__PURE__ */ t("main", {
+	}), p = /* @__PURE__ */ t("main", {
 		"data-slot": "split-layout-content",
 		className: e("min-w-0", o),
-		children: c
+		children: l
 	});
 	return /* @__PURE__ */ n("div", {
 		"data-slot": "split-layout",
-		className: e("grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]", i === "start" && "lg:grid-cols-[320px_minmax(0,1fr)]", s),
-		...l,
-		children: [i === "start" ? u : d, i === "start" ? d : u]
+		className: e("grid gap-4 lg:grid-cols-[minmax(0,1fr)_var(--split-aside-width)]", i === "start" && "lg:grid-cols-[var(--split-aside-width)_minmax(0,1fr)]", c),
+		style: {
+			"--split-aside-width": s,
+			...u
+		},
+		...d,
+		children: [i === "start" ? f : p, i === "start" ? p : f]
 	});
 }
 //#endregion
-export { r as Section, a as SplitLayout, i as Toolbar };
+export { a as Section, s as SplitLayout, o as Toolbar };

package/dist/src/components/layout/sidebar-context.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../ui/button/index.cjs"),n=require("../../hooks/use-is-mobile.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=r.createContext(null);function s({collapsed:e,defaultCollapsed:t=!1,onCollapsedChange:n,mobileOpen:i,defaultMobileOpen:s=!1,onMobileOpenChange:c,children:l,className:u,...d}){let[f,p]=r.useState(t),[m,h]=r.useState(s),g=e??f,_=i??m,v=r.useCallback(t=>{e===void 0&&p(t),n?.(t)},[e,n]),y=r.useCallback(e=>{i===void 0&&h(e),c?.(e)},[i,c]),b=r.useMemo(()=>({collapsed:g,setCollapsed:v,toggleCollapsed:()=>v(!g),mobileOpen:_,setMobileOpen:y,toggleMobile:()=>y(!_)}),[g,_,v,y]);return(0,a.jsx)(o.Provider,{value:b,children:(0,a.jsx)(`div`,{"data-slot":`sidebar-provider`,className:u??`contents`,...d,children:l})})}function c(e=!1){let t=r.useContext(o);if(!t&&!e)throw Error(`useSidebar must be used within SidebarProvider`);return t}function l({breakpoint:e=1024,onClick:r,children:o,...s}){let l=c(),u=n.useIsMobile(e),d=u?l.mobileOpen?`Close navigation`:`Open navigation`:l.collapsed?`Expand navigation`:`Collapse navigation`,f=u?(0,a.jsx)(i.MenuIcon,{"aria-hidden":`true`}):l.collapsed?(0,a.jsx)(i.PanelLeftOpenIcon,{"aria-hidden":`true`}):(0,a.jsx)(i.PanelLeftCloseIcon,{"aria-hidden":`true`});return(0,a.jsx)(t.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,"aria-label":d,"aria-expanded":u?l.mobileOpen:!l.collapsed,"data-slot":`sidebar-trigger`,onClick:e=>{u?l.toggleMobile():l.toggleCollapsed(),r?.(e)},...s,children:o??f})}exports.SidebarProvider=s,exports.SidebarTrigger=l,exports.useSidebar=c;

package/dist/src/components/layout/sidebar-context.js

@@ -0,0 +1,59 @@
+"use client";
+import { Button as e } from "../ui/button/index.js";
+import { useIsMobile as t } from "../../hooks/use-is-mobile.js";
+import * as n from "react";
+import { MenuIcon as r, PanelLeftCloseIcon as i, PanelLeftOpenIcon as a } from "lucide-react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/layout/sidebar-context.tsx
+var s = n.createContext(null);
+function c({ collapsed: e, defaultCollapsed: t = !1, onCollapsedChange: r, mobileOpen: i, defaultMobileOpen: a = !1, onMobileOpenChange: c, children: l, className: u, ...d }) {
+	let [f, p] = n.useState(t), [m, h] = n.useState(a), g = e ?? f, _ = i ?? m, v = n.useCallback((t) => {
+		e === void 0 && p(t), r?.(t);
+	}, [e, r]), y = n.useCallback((e) => {
+		i === void 0 && h(e), c?.(e);
+	}, [i, c]), b = n.useMemo(() => ({
+		collapsed: g,
+		setCollapsed: v,
+		toggleCollapsed: () => v(!g),
+		mobileOpen: _,
+		setMobileOpen: y,
+		toggleMobile: () => y(!_)
+	}), [
+		g,
+		_,
+		v,
+		y
+	]);
+	return /* @__PURE__ */ o(s.Provider, {
+		value: b,
+		children: /* @__PURE__ */ o("div", {
+			"data-slot": "sidebar-provider",
+			className: u ?? "contents",
+			...d,
+			children: l
+		})
+	});
+}
+function l(e = !1) {
+	let t = n.useContext(s);
+	if (!t && !e) throw Error("useSidebar must be used within SidebarProvider");
+	return t;
+}
+function u({ breakpoint: n = 1024, onClick: s, children: c, ...u }) {
+	let d = l(), f = t(n), p = f ? d.mobileOpen ? "Close navigation" : "Open navigation" : d.collapsed ? "Expand navigation" : "Collapse navigation", m = f ? /* @__PURE__ */ o(r, { "aria-hidden": "true" }) : d.collapsed ? /* @__PURE__ */ o(a, { "aria-hidden": "true" }) : /* @__PURE__ */ o(i, { "aria-hidden": "true" });
+	return /* @__PURE__ */ o(e, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": p,
+		"aria-expanded": f ? d.mobileOpen : !d.collapsed,
+		"data-slot": "sidebar-trigger",
+		onClick: (e) => {
+			f ? d.toggleMobile() : d.toggleCollapsed(), s?.(e);
+		},
+		...u,
+		children: c ?? m
+	});
+}
+//#endregion
+export { c as SidebarProvider, u as SidebarTrigger, l as useSidebar };

package/dist/src/components/layout/sidebar-nav.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/badge/index.cjs"),r=require("../ui/tooltip/index.cjs"),i=require("./controllable-details.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s(e){return e.items?.some(e=>!e.hidden)??!1}function c(e){return e.active?!0:e.items?.some(e=>c(e))??!1}function l({item:e,collapsed:i,depth:a,itemSize:s,activeIndicator:c,itemClassName:l,activeItemClassName:u,renderLink:d}){let f=e.current??(e.active?`page`:void 0),p=(0,o.jsxs)(o.Fragment,{children:[e.icon&&(0,o.jsx)(`span`,{className:`shrink-0 [&_svg]:size-4`,children:e.icon}),!i&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!i&&e.badge&&(0,o.jsx)(n.Badge,{variant:`secondary`,className:`ml-auto h-5 shrink-0 px-1.5`,children:e.badge})]}),m=t.cn(`group flex items-center gap-2 border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,i&&`justify-center px-0`,a>0&&!i&&`pl-3`,l,e.active&&u),h=t=>i?(0,o.jsx)(r.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:t})}):t;return e.href&&e.href.startsWith(`/`)?h(d?d({item:e,href:e.href,"data-slot":`sidebar-nav-item`,"data-depth":String(a),"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,className:m,onClick:t=>{if(e.disabled){t.preventDefault();return}e.onSelect?.()},children:p}):(0,o.jsx)(`a`,{href:e.href,"data-slot":`sidebar-nav-item`,"data-depth":a,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,className:m,onClick:t=>{if(e.disabled){t.preventDefault();return}e.onSelect?.()},children:p})):e.href?h((0,o.jsx)(`button`,{type:`button`,"data-slot":`sidebar-nav-item`,"data-depth":a,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,className:t.cn(`w-full text-left`,m),onClick:()=>{if(e.disabled)return;let t=e.href;if(t){if(e.onSelect?.(),t.startsWith(`http`)){window.open(t,`_blank`,`noopener,noreferrer`);return}window.location.assign(t)}},children:p})):h((0,o.jsx)(`button`,{type:`button`,"data-slot":`sidebar-nav-item`,"data-depth":a,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,disabled:e.disabled,className:t.cn(`w-full text-left`,m),onClick:e.onSelect,children:p}))}function u({items:e,collapsed:d,depth:f,showSectionLabels:p,itemSize:m,activeIndicator:h,itemClassName:g,activeItemClassName:_,renderItem:v,renderLink:y}){return e.map(e=>{if(e.hidden)return null;let b=p&&!d&&f===0&&e.sectionLabel;if(!s(e)){let t=(0,o.jsx)(l,{item:e,collapsed:d,depth:f,itemSize:m,activeIndicator:h,itemClassName:g,activeItemClassName:_,renderLink:y});return(0,o.jsxs)(a.Fragment,{children:[b?(0,o.jsx)(`div`,{"data-slot":`sidebar-nav-group-label`,className:`px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,v?v(e,t):t]},e.key)}let x=e.defaultExpanded??c(e),S=(0,o.jsxs)(`summary`,{"data-slot":`sidebar-nav-group-trigger`,className:t.cn(`flex min-h-9 list-none items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)]`,d?`justify-center px-0`:`px-2`),children:[e.icon?d?(0,o.jsx)(r.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`shrink-0 [&_svg]:size-4`,children:e.icon})}):(0,o.jsx)(`span`,{className:`shrink-0 [&_svg]:size-4`,children:e.icon}):null,!d&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!d&&e.badge?(0,o.jsx)(n.Badge,{variant:`secondary`,className:`h-5 shrink-0 px-1.5`,children:e.badge}):null,!d&&(0,o.jsx)(`span`,{"data-slot":`sidebar-nav-group-chevron`,className:`ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90`,children:`›`})]}),C=(0,o.jsxs)(`div`,{"data-slot":`sidebar-nav-group`,"data-depth":f,children:[b?(0,o.jsx)(`div`,{"data-slot":`sidebar-nav-group-label`,className:`px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,(0,o.jsxs)(i.ControllableDetails,{"data-slot":`sidebar-nav-group-details`,open:e.expanded,defaultOpen:x,className:`group/sidebar-nav-details`,onOpenChange:e.onExpandedChange,children:[S,(0,o.jsx)(`div`,{"data-slot":`sidebar-nav-group-content`,className:t.cn(`mt-1 grid gap-1`,!d&&`ml-3 border-l border-border/55 pl-2`),children:(0,o.jsx)(u,{items:e.items??[],collapsed:d,depth:f+1,showSectionLabels:p,itemSize:m,activeIndicator:h,itemClassName:g,activeItemClassName:_,renderItem:v,renderLink:y})})]})]});return v?(0,o.jsx)(a.Fragment,{children:v(e,C)},e.key):(0,o.jsx)(a.Fragment,{children:C},e.key)})}function d({className:e,items:n,collapsed:r=!1,scrollable:i=!0,showSectionLabels:a=!0,itemSize:s=`md`,activeIndicator:c=`bar`,itemClassName:l,activeItemClassName:d,renderItem:f,renderLink:p,...m}){let h=n.filter(e=>!e.hidden);return(0,o.jsx)(`nav`,{"aria-label":`Primary navigation`,"data-slot":`sidebar-nav`,"data-collapsed":r||void 0,className:t.cn(`grid min-h-0 gap-1`,i?`overflow-y-auto overscroll-contain`:null,e),...m,children:(0,o.jsx)(u,{items:h,collapsed:r,depth:0,showSectionLabels:a,itemSize:s,activeIndicator:c,itemClassName:l,activeItemClassName:d,renderItem:f,renderLink:p})})}exports.SidebarNav=d;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/badge/index.cjs"),r=require("./controllable-details.cjs"),i=require("../ui/tooltip/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s(e){return e.items?.some(e=>!e.hidden)??!1}function c(e){return e.active?!0:e.items?.some(e=>c(e))??!1}function l({item:e,collapsed:r,depth:a,itemSize:s,activeIndicator:c,itemClassName:l,activeItemClassName:u,renderLink:d}){let f=e.current??(e.active?`page`:void 0),p=(0,o.jsxs)(o.Fragment,{children:[e.icon&&(0,o.jsx)(`span`,{className:`shrink-0 [&_svg]:size-4`,children:e.icon}),!r&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge&&(0,o.jsx)(n.Badge,{variant:`secondary`,className:`ml-auto h-5 shrink-0 px-1.5`,children:e.badge})]}),m=t.cn(`group flex items-center gap-2 border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,r&&`justify-center px-0`,a>0&&!r&&`pl-3`,l,e.active&&u),h=t=>r?(0,o.jsx)(i.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:t})}):t;return e.href&&e.href.startsWith(`/`)?h(d?d({item:e,href:e.href,"data-slot":`sidebar-nav-item`,"data-depth":String(a),"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,className:m,onClick:t=>{if(e.disabled){t.preventDefault();return}e.onSelect?.()},children:p}):(0,o.jsx)(`a`,{href:e.href,"data-slot":`sidebar-nav-item`,"data-depth":a,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,className:m,onClick:t=>{if(e.disabled){t.preventDefault();return}e.onSelect?.()},children:p})):e.href?h((0,o.jsx)(`button`,{type:`button`,"data-slot":`sidebar-nav-item`,"data-depth":a,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,className:t.cn(`w-full text-left`,m),onClick:()=>{if(e.disabled)return;let t=e.href;if(t){if(e.onSelect?.(),t.startsWith(`http`)){window.open(t,`_blank`,`noopener,noreferrer`);return}window.location.assign(t)}},children:p})):h((0,o.jsx)(`button`,{type:`button`,"data-slot":`sidebar-nav-item`,"data-depth":a,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-size":s,"data-active-indicator":c,"aria-current":f,disabled:e.disabled,className:t.cn(`w-full text-left`,m),onClick:e.onSelect,children:p}))}function u({items:e,collapsed:d,depth:f,showSectionLabels:p,itemSize:m,activeIndicator:h,itemClassName:g,activeItemClassName:_,renderItem:v,renderLink:y}){return e.map(e=>{if(e.hidden)return null;let b=p&&!d&&f===0&&e.sectionLabel;if(!s(e)){let t=(0,o.jsx)(l,{item:e,collapsed:d,depth:f,itemSize:m,activeIndicator:h,itemClassName:g,activeItemClassName:_,renderLink:y});return(0,o.jsxs)(a.Fragment,{children:[b?(0,o.jsx)(`div`,{"data-slot":`sidebar-nav-group-label`,className:`px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,v?v(e,t):t]},e.key)}let x=e.defaultExpanded??c(e),S=(0,o.jsxs)(`summary`,{"data-slot":`sidebar-nav-group-trigger`,className:t.cn(`flex min-h-9 list-none items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)]`,d?`justify-center px-0`:`px-2`),children:[e.icon?d?(0,o.jsx)(i.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`shrink-0 [&_svg]:size-4`,children:e.icon})}):(0,o.jsx)(`span`,{className:`shrink-0 [&_svg]:size-4`,children:e.icon}):null,!d&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!d&&e.badge?(0,o.jsx)(n.Badge,{variant:`secondary`,className:`h-5 shrink-0 px-1.5`,children:e.badge}):null,!d&&(0,o.jsx)(`span`,{"data-slot":`sidebar-nav-group-chevron`,className:`ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90`,children:`›`})]}),C=(0,o.jsxs)(`div`,{"data-slot":`sidebar-nav-group`,"data-depth":f,children:[b?(0,o.jsx)(`div`,{"data-slot":`sidebar-nav-group-label`,className:`px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,(0,o.jsxs)(r.ControllableDetails,{"data-slot":`sidebar-nav-group-details`,open:e.expanded,defaultOpen:x,className:`group/sidebar-nav-details`,onOpenChange:e.onExpandedChange,children:[S,(0,o.jsx)(`div`,{"data-slot":`sidebar-nav-group-content`,className:t.cn(`mt-1 grid gap-1`,!d&&`ml-3 border-l border-border/55 pl-2`),children:(0,o.jsx)(u,{items:e.items??[],collapsed:d,depth:f+1,showSectionLabels:p,itemSize:m,activeIndicator:h,itemClassName:g,activeItemClassName:_,renderItem:v,renderLink:y})})]})]});return v?(0,o.jsx)(a.Fragment,{children:v(e,C)},e.key):(0,o.jsx)(a.Fragment,{children:C},e.key)})}function d({className:e,items:n,collapsed:r=!1,scrollable:i=!0,showSectionLabels:a=!0,itemSize:s=`md`,activeIndicator:c=`bar`,itemClassName:l,activeItemClassName:d,renderItem:f,renderLink:p,...m}){let h=n.filter(e=>!e.hidden);return(0,o.jsx)(`nav`,{"aria-label":`Primary navigation`,"data-slot":`sidebar-nav`,"data-collapsed":r||void 0,className:t.cn(`grid min-h-0 gap-1`,i?`overflow-y-auto overscroll-contain`:null,e),...m,children:(0,o.jsx)(u,{items:h,collapsed:r,depth:0,showSectionLabels:a,itemSize:s,activeIndicator:c,itemClassName:l,activeItemClassName:d,renderItem:f,renderLink:p})})}exports.SidebarNav=d;