@webority/ui-react 0.86.0 → 0.86.3

package/dist/components/AppAlert.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{Alert as i}from"react-bootstrap";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={info:`info`,success:`check`,warning:`alert-triangle`,danger:`x`},l=[`info`,`success`,`warning`,`danger`],u=[`sm`,`md`,`lg`],d=[`alert`,`status`,`none`],f=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function p(e,t,n,i,a,s){return i?o(`span`,{className:`alert-icon alert-icon-image`,style:s>0?{width:s,height:s}:void 0,children:o(`img`,{src:i,alt:a})}):e?typeof e==`string`?o(`span`,{className:`alert-icon`,children:o(r,{name:e,size:t,variant:n})}):o(`span`,{className:`alert-icon`,children:e}):null}function m(r){let{variant:m=`info`,children:h,title:g,icon:_,iconVariant:v,iconSize:y,image:b,imageAlt:x=``,imageSize:S,className:C=``,onClose:w,dismissible:T,bordered:E=!0,accent:D=!1,size:O=`md`,action:k,role:A=`alert`,...j}=r;n(`AppAlert`,j),t(`AppAlert`,`variant`,m,l),t(`AppAlert`,`size`,O,u),t(`AppAlert`,`role`,A,d),t(`AppAlert`,`iconVariant`,v,f);let M=_===void 0?c[m]:_===`none`?null:_,N=!!b||!!M,P=k!=null&&k!==!1,F=g?o(`div`,{className:`alert-heading`,children:g}):null,I=N&&!!F&&!!h,L=y>0?y:O===`lg`?I?17:15:I?13:11;return o(i,{variant:m,className:[N?`alert-has-icon`:``,P?`alert-has-action`:``,I?`alert-stack`:``,E?``:`alert-borderless`,D?`alert-accent`:``,O===`sm`?`alert-sm`:``,O===`lg`?`alert-lg`:``,C].filter(Boolean).join(` `)||void 0,onClose:w,dismissible:T??typeof w==`function`,transition:!1,role:A===`none`?void 0:A,...e(`AppAlert`,r),...j,children:N||P?s(a,{children:[N&&p(M,L,v,b,x,S),s(`div`,{className:`alert-content`,children:[F,h]}),P&&o(`div`,{className:`alert-action`,children:k})]}):s(a,{children:[F,h]})})}export{m as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{Alert as i}from"react-bootstrap";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={info:`info`,success:`check`,warning:`alert-triangle`,danger:`x`},l=[`info`,`success`,`warning`,`danger`,`neutral`],u=[`sm`,`md`,`lg`],d=[`alert`,`status`,`none`],f=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function p(e,t,n,i,a,s){return i?o(`span`,{className:`alert-icon alert-icon-image`,style:s>0?{width:s,height:s}:void 0,children:o(`img`,{src:i,alt:a})}):e?typeof e==`string`?o(`span`,{className:`alert-icon`,children:o(r,{name:e,size:t,variant:n})}):o(`span`,{className:`alert-icon`,children:e}):null}function m(r){let{variant:m=`info`,children:h,title:g,icon:_,iconVariant:v,iconSize:y,image:b,imageAlt:x=``,imageSize:S,className:C=``,onClose:w,dismissible:T,bordered:E=!0,accent:D=!1,size:O=`md`,action:k,role:A=`alert`,...j}=r;n(`AppAlert`,j),t(`AppAlert`,`variant`,m,l),t(`AppAlert`,`size`,O,u),t(`AppAlert`,`role`,A,d),t(`AppAlert`,`iconVariant`,v,f);let M=_===void 0?c[m]:_===`none`?null:_,N=!!b||!!M,P=k!=null&&k!==!1,F=g?o(`div`,{className:`alert-heading`,children:g}):null,I=N&&!!F&&!!h,L=y>0?y:O===`lg`?I?17:15:I?13:11;return o(i,{variant:m,className:[N?`alert-has-icon`:``,P?`alert-has-action`:``,I?`alert-stack`:``,E?``:`alert-borderless`,D?`alert-accent`:``,O===`sm`?`alert-sm`:``,O===`lg`?`alert-lg`:``,C].filter(Boolean).join(` `)||void 0,onClose:w,dismissible:T??typeof w==`function`,transition:!1,role:A===`none`?void 0:A,...e(`AppAlert`,r),...j,children:N||P?s(a,{children:[N&&p(M,L,v,b,x,S),s(`div`,{className:`alert-content`,children:[F,h]}),P&&o(`div`,{className:`alert-action`,children:k})]}):s(a,{children:[F,h]})})}export{m as default};

package/dist/components/AppCard.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{useState as i}from"react";import{Card as a}from"react-bootstrap";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`default`,`elevated`,`outlined`,`muted`,`accent`],u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`none`,`sm`,`md`,`lg`],f={xs:320,sm:420,md:560,lg:720};function p(p){let{title:m,subtitle:h,headerIcon:g,titleClassName:_=``,header:v,headerExtra:y,headerActions:b,footer:x,media:S,children:C,variant:w=`default`,tone:T=`primary`,padding:E=`md`,maxWidth:D,className:O=``,bodyClassName:k=``,headerClassName:A=``,body:j=!0,lifted:M=!1,href:N,onClick:P,linkComponent:F,onClose:I,dismissible:L,closeLabel:R=`Close`,...z}=p,[B,V]=i(!1);n(`AppCard`,z),t(`AppCard`,`variant`,w,l),t(`AppCard`,`tone`,T,u),t(`AppCard`,`padding`,E,d);let{style:H,...U}=z,W=N!=null||P!=null,G=[w&&w!=="default"?`card-${w}`:``,w===`accent`&&T&&T!==`primary`?`tone-${T}`:``,E&&E!==`md`?`card-pad-${E}`:``,M?`card-lifted`:``,D==null?``:`card-constrained`,W?`card-clickable`:``,O].filter(Boolean).join(` `)||void 0,K=D==null?void 0:f[D]==null?typeof D==`number`?`${D}px`:D:`${f[D]}px`,q=K?{"--card-max-width":K,...H}:H,J={};N==null?P!=null&&(J={role:`button`,tabIndex:0,onClick:P,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),P(e))}}):(J=F?{as:F,to:N}:{as:`a`,href:N},P&&(J.onClick=P));let Y=L??typeof I==`function`,X=Y?s(`button`,{type:`button`,className:`card-close`,"aria-label":R,onClick:e=>{e.preventDefault(),e.stopPropagation(),V(!0),I?.()},onKeyDown:e=>e.stopPropagation(),children:s(r,{name:`x`,size:16})}):null,Z=m!=null||h!=null||g!=null,Q=v!=null||Z||y!=null||b!=null||Y,$=g==null?null:typeof g==`string`?s(r,{name:g,size:18}):g;return B?null:c(a,{className:G,style:q,...e(`AppCard`,p),...U,...J,children:[S!=null&&s(`div`,{className:`card-media`,children:S}),Q&&c(a.Header,{className:A||void 0,children:[v??c(o,{children:[Z&&c(`div`,{className:`card-header-main`,children:[$!=null&&s(`span`,{className:`card-header-icon`,children:$}),c(`div`,{className:`card-header-titles`,children:[m!=null&&s(`div`,{className:[`card-title`,_].filter(Boolean).join(` `),children:m}),h!=null&&s(`div`,{className:`card-subtitle`,children:h})]})]}),y,b!=null&&s(`div`,{className:`card-header-actions`,children:b})]}),X]}),j?s(a.Body,{className:k||void 0,children:C}):C,x!=null&&s(`div`,{className:`card-footer`,children:x})]})}export{p as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{useState as i}from"react";import{Card as a}from"react-bootstrap";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`default`,`elevated`,`outlined`,`muted`,`accent`],u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`none`,`sm`,`md`,`lg`],f=[`sans`,`serif`],p={xs:320,sm:420,md:560,lg:720};function m(m){let{title:h,subtitle:g,headerIcon:_,titleClassName:v=``,titleFont:y=`sans`,header:b,headerExtra:x,headerActions:S,footer:C,media:w,children:T,variant:E=`default`,tone:D=`primary`,padding:O=`md`,maxWidth:k,className:A=``,bodyClassName:j=``,headerClassName:M=``,body:ee=!0,lifted:N=!1,href:P,onClick:F,linkComponent:I,onClose:L,dismissible:R,closeLabel:z=`Close`,...B}=m,[V,H]=i(!1);n(`AppCard`,B),t(`AppCard`,`variant`,E,l),t(`AppCard`,`tone`,D,u),t(`AppCard`,`padding`,O,d),t(`AppCard`,`titleFont`,y,f);let{style:U,...W}=B,G=P!=null||F!=null,K=[E&&E!=="default"?`card-${E}`:``,E===`accent`&&D&&D!==`primary`?`tone-${D}`:``,O&&O!==`md`?`card-pad-${O}`:``,N?`card-lifted`:``,k==null?``:`card-constrained`,G?`card-clickable`:``,A].filter(Boolean).join(` `)||void 0,q=k==null?void 0:p[k]==null?typeof k==`number`?`${k}px`:k:`${p[k]}px`,J=q?{"--card-max-width":q,...U}:U,Y={};P==null?F!=null&&(Y={role:`button`,tabIndex:0,onClick:F,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),F(e))}}):(Y=I?{as:I,to:P}:{as:`a`,href:P},F&&(Y.onClick=F));let X=R??typeof L==`function`,Z=X?s(`button`,{type:`button`,className:`card-close`,"aria-label":z,onClick:e=>{e.preventDefault(),e.stopPropagation(),H(!0),L?.()},onKeyDown:e=>e.stopPropagation(),children:s(r,{name:`x`,size:16})}):null,Q=h!=null||g!=null||_!=null,te=b!=null||Q||x!=null||S!=null||X,$=_==null?null:typeof _==`string`?s(r,{name:_,size:18}):_;return V?null:c(a,{className:K,style:J,...e(`AppCard`,m),...W,...Y,children:[w!=null&&s(`div`,{className:`card-media`,children:w}),te&&c(a.Header,{className:M||void 0,children:[b??c(o,{children:[Q&&c(`div`,{className:`card-header-main`,children:[$!=null&&s(`span`,{className:`card-header-icon`,children:$}),c(`div`,{className:`card-header-titles`,children:[h!=null&&s(`div`,{className:[`card-title`,v].filter(Boolean).join(` `),style:y===`serif`?{fontFamily:`var(--wui-font-display)`}:void 0,children:h}),g!=null&&s(`div`,{className:`card-subtitle`,children:g})]})]}),x,S!=null&&s(`div`,{className:`card-header-actions`,children:S})]}),Z]}),ee?s(a.Body,{className:j||void 0,children:T}):T,C!=null&&s(`div`,{className:`card-footer`,children:C})]})}export{m as default};

package/dist/components/AppInput.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import ee from"../lib/FieldMessage.js";import te from"./AppPopover.js";import ne from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{MASK_INPUT_TYPES as re,MASK_NAMES as ie,attachInputMask as ae,evaluatePassword as oe,formatMasked as a,isMaskPattern as se,postedMasked as ce}from"@webority/ui-elements/helpers";import{forwardRef as o,useEffect as s,useId as le,useRef as c,useState as l}from"react";import{Form as u}from"react-bootstrap";import{jsx as d,jsxs as f}from"react/jsx-runtime";var ue=[`sm`,`md`,`lg`],de=[`bare`],fe=[!0,!1,`above`],p=o(function(o,p){let{label:m,required:h=!1,error:pe,hint:me,help:g,helpLabel:he=`More information`,type:_=`text`,size:v=`md`,leftIcon:y,rightIcon:b,onRightIconClick:x,rightIconLabel:ge,unit:S,id:_e,name:ve,className:ye=``,fieldClassName:C=``,disabled:w=!1,clearable:T=!1,showCount:E=!1,maxLength:D,prefix:O,suffix:k,action:A,floatingLabel:j=!1,variant:M,passwordRequirements:N=!1,requirementsPlacement:P=`auto`,mask:F,postFormatted:I=!1,onMaskChange:L,...R}=o;n(`AppInput`,R),t(`AppInput`,`size`,v,ue),t(`AppInput`,`variant`,M,de),t(`AppInput`,`floatingLabel`,j,fe),F!=null&&!se(F)&&t(`AppInput`,`mask`,F,ie),F!=null&&t(`AppInput`,`type`,_,re);let[z,be]=l(!1),[xe,Se]=l(``),B=pe||xe,Ce=le(),V=_e||Ce,H=_===`password`,we=H&&z?`text`:_,U=c(null),Te=e=>{U.current=e,typeof p==`function`?p(e):p&&(p.current=e)},W=String(R.value??R.defaultValue??``),[Ee,G]=l(()=>!!W),[K,q]=l(()=>W.length),De=T&&!w,J=T||E,Y=H&&!!N,[Oe,ke]=l(W);s(()=>{!Y||R.value===void 0||ke(String(R.value??``))},[R.value,Y]),s(()=>{if(!J||R.value===void 0)return;let e=String(R.value??``);G(!!e),q(e.length)},[R.value,J]);let Ae=e=>{G(!!e.target.value),q(e.target.value.length),R.onInput?.(e)},je=e=>{Y&&ke(e.target.value),J?Ae(e):R.onInput?.(e)},Me=F?{...R.value!==void 0&&{value:a(F,R.value)},...R.defaultValue!==void 0&&{defaultValue:a(F,R.defaultValue)}}:null,Ne=c(L);Ne.current=L,s(()=>{let e=U.current;if(!(!F||!e))return ae(e,{mask:F,postFormatted:I,onChange:(e,t)=>Ne.current?.(e,t),onInvalidChange:Se})},[F,I]);let Pe=e=>F&&!I&&e?t=>{let n=t.target,r=new Proxy(n,{get:(e,t)=>{if(t===`value`)return ce(F,e.value);let n=Reflect.get(e,t,e);return typeof n==`function`?n.bind(e):n}});e(Object.create(t,{target:{value:r}}))}:e,Fe=De?d(`button`,{type:`button`,className:`input-clear`,onClick:()=>{let e=U.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?t.call(e,``):e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),G(!1),e.focus()},"aria-label":`Clear`,tabIndex:-1,hidden:!Ee,children:d(r,{name:`x`,size:16})}):null,Ie=B&&V?`${V}-error`:void 0,Le=me&&V?`${V}-hint`:void 0,X=Y&&P===`inline`,Re=X&&V?`${V}-requirements`:void 0,ze=Ie||(X?Re:Le),Be=[`input`,v===`sm`?`input-sm`:``,v===`lg`?`input-lg`:``,B?`error`:``,H?`pw`:``,S?`num-input`:``,!(j&&m||O||k||S||H||b)&&T&&De?`has-clear`:``,M===`bare`?`input-bare`:``,ye].filter(Boolean).join(` `),Z=d(u.Control,{id:V,name:ve,type:we,className:Be,disabled:w,required:h,"aria-invalid":B?`true`:`false`,"aria-describedby":ze,maxLength:D,...R,onChange:Pe(R.onChange),onBlur:Pe(R.onBlur),...Me,placeholder:j?` `:R.placeholder,ref:Te,onInput:J||Y?je:R.onInput}),Q=N===!0||N,Ve=Q&&typeof Q==`object`&&Q.title||`Password requirements`,He=Y?oe(Oe,Q):null,Ue=Y?d(`ul`,{className:`pw-criteria`,"aria-live":`polite`,id:Re,"aria-label":X?Ve:void 0,children:He.map(e=>f(`li`,{className:`pw-rule ${e.met?`met`:`unmet`}`,children:[d(`span`,{className:`pw-mark`,"aria-hidden":`true`}),d(`span`,{className:`pw-rule-text`,children:e.label}),d(`span`,{className:`visually-hidden`,children:e.met?`: met`:`: not met`})]},e.key))}):null,$;if(j&&m&&!H)$=f(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:[Z,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]});else if(A)$=f(`div`,{className:`input-action-row`,children:[f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}),d(`div`,{className:`input-action`,children:A})]});else if(O||k)$=f(`div`,{className:`input-affixed`,children:[O!=null&&d(`span`,{className:`affix affix-pre`,children:O}),Z,k!=null&&d(`span`,{className:`affix affix-suf`,children:k})]});else if(S)$=f(`div`,{className:`input-with-unit`,children:[Z,d(`span`,{className:`unit`,children:S})]});else if(H){let e=f(`button`,{type:`button`,className:`pw-toggle${z?` pw-revealed`:``}`,onClick:()=>be(e=>!e),"aria-label":z?`Hide password`:`Show password`,tabIndex:-1,children:[d(r,{name:`eye`,size:18,className:`pw-eye`}),d(r,{name:`eye-off`,size:18,className:`pw-eye-off`})]}),t=j&&m?d(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:f(`div`,{className:`input-wrap`,children:[Z,e,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]})}):f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,e]});$=Y&&!X?d(te,{trigger:t,triggerType:`focus`,placement:P,title:Ve,className:`pw-popover`,children:Ue}):t}else $=b?f(`div`,{className:`input-wrap`,children:[Z,d(`button`,{type:`button`,className:`pw-toggle`,onClick:x,disabled:!x,tabIndex:-1,"aria-label":ge||b,children:d(r,{name:b,size:18})})]}):T?f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,Fe]}):y?f(`div`,{className:`input-icon`,children:[d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}):Z;return f(u.Group,{...e(`AppInput`,o),className:`field${C?` ${C}`:``}`,children:[m&&!j&&f(u.Label,{className:`label`,htmlFor:V,children:[m,h&&d(i,{}),g&&d(ne,{label:he,children:g})]}),$,X&&d(`div`,{className:`wui-pw-inline`,children:Ue}),d(ee,{error:B,hint:X?null:me,errorId:Ie,hintId:Le}),E&&f(`div`,{className:`field-count${D&&K>=D?` at-limit`:``}`,children:[K,D?` / ${D}`:``]})]})});export{p as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import ee from"../lib/FieldMessage.js";import te from"./AppPopover.js";import ne from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{MASK_INPUT_TYPES as re,MASK_NAMES as ie,attachInputMask as ae,evaluatePassword as oe,formatMasked as a,isMaskPattern as se,postedMasked as ce}from"@webority/ui-elements/helpers";import{forwardRef as o,useEffect as s,useId as le,useRef as c,useState as l}from"react";import{Form as u}from"react-bootstrap";import{jsx as d,jsxs as f}from"react/jsx-runtime";var ue=[`sm`,`md`,`lg`,`xl`],de=[`bare`],fe=[!0,!1,`above`],p=o(function(o,p){let{label:m,required:h=!1,error:pe,hint:me,help:g,helpLabel:he=`More information`,type:_=`text`,size:v=`md`,leftIcon:y,rightIcon:b,onRightIconClick:x,rightIconLabel:ge,unit:S,id:_e,name:ve,className:ye=``,fieldClassName:C=``,disabled:w=!1,clearable:T=!1,showCount:E=!1,maxLength:D,prefix:O,suffix:k,action:A,floatingLabel:j=!1,variant:M,passwordRequirements:N=!1,requirementsPlacement:P=`auto`,mask:F,postFormatted:I=!1,onMaskChange:L,...R}=o;n(`AppInput`,R),t(`AppInput`,`size`,v,ue),t(`AppInput`,`variant`,M,de),t(`AppInput`,`floatingLabel`,j,fe),F!=null&&!se(F)&&t(`AppInput`,`mask`,F,ie),F!=null&&t(`AppInput`,`type`,_,re);let[z,be]=l(!1),[xe,Se]=l(``),B=pe||xe,Ce=le(),V=_e||Ce,H=_===`password`,we=H&&z?`text`:_,U=c(null),Te=e=>{U.current=e,typeof p==`function`?p(e):p&&(p.current=e)},W=String(R.value??R.defaultValue??``),[Ee,G]=l(()=>!!W),[K,q]=l(()=>W.length),De=T&&!w,J=T||E,Y=H&&!!N,[Oe,ke]=l(W);s(()=>{!Y||R.value===void 0||ke(String(R.value??``))},[R.value,Y]),s(()=>{if(!J||R.value===void 0)return;let e=String(R.value??``);G(!!e),q(e.length)},[R.value,J]);let Ae=e=>{G(!!e.target.value),q(e.target.value.length),R.onInput?.(e)},je=e=>{Y&&ke(e.target.value),J?Ae(e):R.onInput?.(e)},Me=F?{...R.value!==void 0&&{value:a(F,R.value)},...R.defaultValue!==void 0&&{defaultValue:a(F,R.defaultValue)}}:null,Ne=c(L);Ne.current=L,s(()=>{let e=U.current;if(!(!F||!e))return ae(e,{mask:F,postFormatted:I,onChange:(e,t)=>Ne.current?.(e,t),onInvalidChange:Se})},[F,I]);let Pe=e=>F&&!I&&e?t=>{let n=t.target,r=new Proxy(n,{get:(e,t)=>{if(t===`value`)return ce(F,e.value);let n=Reflect.get(e,t,e);return typeof n==`function`?n.bind(e):n}});e(Object.create(t,{target:{value:r}}))}:e,Fe=De?d(`button`,{type:`button`,className:`input-clear`,onClick:()=>{let e=U.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?t.call(e,``):e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),G(!1),e.focus()},"aria-label":`Clear`,tabIndex:-1,hidden:!Ee,children:d(r,{name:`x`,size:16})}):null,Ie=B&&V?`${V}-error`:void 0,Le=me&&V?`${V}-hint`:void 0,X=Y&&P===`inline`,Re=X&&V?`${V}-requirements`:void 0,ze=Ie||(X?Re:Le),Be=[`input`,v===`sm`?`input-sm`:``,v===`lg`?`input-lg`:``,v===`xl`?`wui-input-xl`:``,B?`error`:``,H?`pw`:``,S?`num-input`:``,!(j&&m||O||k||S||H||b)&&T&&De?`has-clear`:``,M===`bare`?`input-bare`:``,ye].filter(Boolean).join(` `),Z=d(u.Control,{id:V,name:ve,type:we,className:Be,disabled:w,required:h,"aria-invalid":B?`true`:`false`,"aria-describedby":ze,maxLength:D,...R,onChange:Pe(R.onChange),onBlur:Pe(R.onBlur),...Me,placeholder:j?` `:R.placeholder,ref:Te,onInput:J||Y?je:R.onInput}),Q=N===!0||N,Ve=Q&&typeof Q==`object`&&Q.title||`Password requirements`,He=Y?oe(Oe,Q):null,Ue=Y?d(`ul`,{className:`pw-criteria`,"aria-live":`polite`,id:Re,"aria-label":X?Ve:void 0,children:He.map(e=>f(`li`,{className:`pw-rule ${e.met?`met`:`unmet`}`,children:[d(`span`,{className:`pw-mark`,"aria-hidden":`true`}),d(`span`,{className:`pw-rule-text`,children:e.label}),d(`span`,{className:`visually-hidden`,children:e.met?`: met`:`: not met`})]},e.key))}):null,$;if(j&&m&&!H)$=f(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:[Z,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]});else if(A)$=f(`div`,{className:`input-action-row`,children:[f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}),d(`div`,{className:`input-action`,children:A})]});else if(O||k)$=f(`div`,{className:`input-affixed`,children:[O!=null&&d(`span`,{className:`affix affix-pre`,children:O}),Z,k!=null&&d(`span`,{className:`affix affix-suf`,children:k})]});else if(S)$=f(`div`,{className:`input-with-unit`,children:[Z,d(`span`,{className:`unit`,children:S})]});else if(H){let e=f(`button`,{type:`button`,className:`pw-toggle${z?` pw-revealed`:``}`,onClick:()=>be(e=>!e),"aria-label":z?`Hide password`:`Show password`,tabIndex:-1,children:[d(r,{name:`eye`,size:18,className:`pw-eye`}),d(r,{name:`eye-off`,size:18,className:`pw-eye-off`})]}),t=j&&m?d(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:f(`div`,{className:`input-wrap`,children:[Z,e,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]})}):f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,e]});$=Y&&!X?d(te,{trigger:t,triggerType:`focus`,placement:P,title:Ve,className:`pw-popover`,children:Ue}):t}else $=b?f(`div`,{className:`input-wrap`,children:[Z,d(`button`,{type:`button`,className:`pw-toggle`,onClick:x,disabled:!x,tabIndex:-1,"aria-label":ge||b,children:d(r,{name:b,size:18})})]}):T?f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,Fe]}):y?f(`div`,{className:`input-icon`,children:[d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}):Z;return f(u.Group,{...e(`AppInput`,o),className:`field${C?` ${C}`:``}`,children:[m&&!j&&f(u.Label,{className:`label`,htmlFor:V,children:[m,h&&d(i,{}),g&&d(ne,{label:he,children:g})]}),$,X&&d(`div`,{className:`wui-pw-inline`,children:Ue}),d(ee,{error:B,hint:X?null:me,errorId:Ie,hintId:Le}),E&&f(`div`,{className:`field-count${D&&K>=D?` at-limit`:``}`,children:[K,D?` / ${D}`:``]})]})});export{p as default};

package/dist/components/AppLink.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={sm:13,md:15,lg:18},l=[`underline`,`underline-center`,`static`,`slide`,`icon`,`highlight`,`bracket`,`fade`,`grow`,`glow`,`shine`,`none`];function u(e,t,n){if(!e)return null;let r=`wui-link__ic wui-link__ic--${t}`;return typeof e==`string`?o(`span`,{className:r,children:o(i,{name:e,size:c[n]??c.md})}):o(`span`,{className:r,children:e})}function d(i){let{children:d,label:f,href:p,animation:m=`underline`,leftIcon:h=null,rightIcon:g=null,size:_=`md`,surface:v=`default`,external:y=!1,disabled:b=!1,linkComponent:x,className:S=``,...C}=i;r(`AppLink`,C),n(`AppLink`,`animation`,m,l),n(`AppLink`,`size`,_,Object.keys(c)),n(`AppLink`,`surface`,v,[`default`,`dark`]),!p&&C.onClick&&t(`[@webority/ui-react] AppLink has onClick but no href, so it renders an anchor that keyboards cannot reach. Use AppButton for an action, or pass href.`);let w=l.includes(m)?m:`underline`,T=w===`icon`&&!g&&!h?`arrow-right`:g,E=[`wui-link`,`wui-link--${w}`,_===`md`?``:`wui-link--${_}`,b?`is-disabled`:``,v===`dark`?`wui-link--surface-dark`:``,S].filter(Boolean).join(` `),D=s(a,{children:[u(h,`left`,_),o(`span`,{className:`wui-link__label`,children:d??f}),u(T,`right`,_)]});return b?o(`span`,{className:E,"aria-disabled":`true`,...e(`AppLink`,i),...C,children:D}):x&&!y?o(x,{className:E,to:p,...e(`AppLink`,i),...C,children:D}):o(`a`,{className:E,href:p,target:y?`_blank`:void 0,rel:y?`noopener noreferrer`:void 0,...e(`AppLink`,i),...C,children:D})}export{d as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={sm:13,md:15,lg:18},l=[`underline`,`underline-center`,`static`,`slide`,`icon`,`highlight`,`bracket`,`fade`,`grow`,`glow`,`shine`,`none`];function u(e,t,n){if(!e)return null;let r=`wui-link__ic wui-link__ic--${t}`;return typeof e==`string`?o(`span`,{className:r,children:o(i,{name:e,size:c[n]??c.md})}):o(`span`,{className:r,children:e})}function d(i){let{children:d,label:f,href:p,animation:m=`underline`,leftIcon:h=null,rightIcon:g=null,size:_=`md`,surface:v=`default`,external:y=!1,disabled:b=!1,linkComponent:x,className:S=``,...C}=i;r(`AppLink`,C),n(`AppLink`,`animation`,m,l),n(`AppLink`,`size`,_,Object.keys(c)),n(`AppLink`,`surface`,v,[`default`,`dark`]),!p&&C.onClick&&!x&&t(`[@webority/ui-react] AppLink has onClick but no href, so it renders an anchor that keyboards cannot reach. Use AppButton for an action, or pass href.`);let w=l.includes(m)?m:`underline`,T=w===`icon`&&!g&&!h?`arrow-right`:g,E=[`wui-link`,`wui-link--${w}`,_===`md`?``:`wui-link--${_}`,b?`is-disabled`:``,v===`dark`?`wui-link--surface-dark`:``,S].filter(Boolean).join(` `),D=s(a,{children:[u(h,`left`,_),o(`span`,{className:`wui-link__label`,children:d??f}),u(T,`right`,_)]});return b?o(`span`,{className:E,"aria-disabled":`true`,...e(`AppLink`,i),...C,children:D}):x&&!y?o(x,{className:E,to:p,...e(`AppLink`,i),...C,children:D}):o(`a`,{className:E,href:p,target:y?`_blank`:void 0,rel:y?`noopener noreferrer`:void 0,...e(`AppLink`,i),...C,children:D})}export{d as default};

package/dist/components/AppSelect.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import ee from"./warnUnknownProps.js";import te from"../lib/FieldMessage.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useNodeLabels.js";import a,{optionsEqual as o}from"./useWuiControl.js";import{forwardRef as s,useId as c,useLayoutEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var ne=[`sm`,`lg`],re=(e,t)=>({value:e.value,label:t,icon:e.icon}),m=s(function(s,m){let{value:h,onChange:g,options:_=[],placeholder:v=`Select...`,searchPlaceholder:y=`Search...`,searchable:b=!1,clearable:ie=!1,size:x,icon:ae,prefix:S,suffix:C,floatingLabel:w=!1,disabled:oe,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":L,...R}=s;ee(`AppSelect`,R),t(`AppSelect`,`size`,x,ne);let z=c(),{setRef:B,innerRef:V}=a({ref:m,value:h??``,onChange:g}),{portal:H,toElementOptions:U}=i(_),W=u({el:null,options:null,map:null});l(()=>{let e=V.current;if(!e||W.current.el===e&&W.current.options===_&&W.current.map===U)return;W.current={el:e,options:_,map:U};let t=U(_,re);o(t,e.options)||(e.options=t)});let G=j||z,K=w&&T,q=D&&G?`${G}-error`:void 0,J=O&&G?`${G}-hint`:void 0,se=q||J||L,Y=!K&&(S!=null||C!=null),X=!T&&!D&&!O,Z=e(`AppSelect`,s),Q=p(d,{children:[f(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":se||void 0,"aria-invalid":D?`true`:void 0,ref:B,value:h||void 0,id:G,name:M,placeholder:w&&T?` `:v,"search-placeholder":y,searchable:b?``:void 0,clearable:ie?``:void 0,size:x||void 0,icon:ae||void 0,disabled:oe?``:void 0,required:E?``:void 0,className:N||void 0,...X&&!Y?Z:null,...R}),H]}),$=Y?p(`div`,{...X?Z:null,className:`input-affixed`,children:[S!=null&&f(`span`,{className:`affix affix-pre`,children:S}),Q,C!=null&&f(`span`,{className:`affix affix-suf`,children:C})]}):Q;if(X)return $;let ce=[`field`,P].filter(Boolean).join(` `);return p(`div`,{...Z,className:ce,children:[T&&!K&&p(`label`,{className:`label`,htmlFor:G,children:[T,E&&f(r,{}),k&&f(n,{label:A,children:k})]}),K?p(`div`,{className:`field-float`,children:[Q,p(`label`,{className:`float-label`,htmlFor:G,children:[T,E&&f(r,{})]})]}):$,f(te,{error:D,hint:O,errorId:q,hintId:J})]})});export{m as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import ee from"./warnUnknownProps.js";import te from"../lib/FieldMessage.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useNodeLabels.js";import a,{optionsEqual as o}from"./useWuiControl.js";import{forwardRef as s,useId as c,useLayoutEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var ne=[`sm`,`lg`,`xl`],re=(e,t)=>({value:e.value,label:t,icon:e.icon}),m=s(function(s,m){let{value:h,onChange:g,options:_=[],placeholder:v=`Select...`,searchPlaceholder:y=`Search...`,searchable:b=!1,clearable:ie=!1,size:x,icon:ae,prefix:S,suffix:C,floatingLabel:w=!1,disabled:oe,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":L,...R}=s;ee(`AppSelect`,R),t(`AppSelect`,`size`,x,ne);let z=c(),{setRef:B,innerRef:V}=a({ref:m,value:h??``,onChange:g}),{portal:H,toElementOptions:U}=i(_),W=u({el:null,options:null,map:null});l(()=>{let e=V.current;if(!e||W.current.el===e&&W.current.options===_&&W.current.map===U)return;W.current={el:e,options:_,map:U};let t=U(_,re);o(t,e.options)||(e.options=t)});let G=j||z,K=w&&T,q=D&&G?`${G}-error`:void 0,J=O&&G?`${G}-hint`:void 0,se=q||J||L,Y=!K&&(S!=null||C!=null),X=!T&&!D&&!O,Z=e(`AppSelect`,s),Q=p(d,{children:[f(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":se||void 0,"aria-invalid":D?`true`:void 0,ref:B,value:h||void 0,id:G,name:M,placeholder:w&&T?` `:v,"search-placeholder":y,searchable:b?``:void 0,clearable:ie?``:void 0,size:x||void 0,icon:ae||void 0,disabled:oe?``:void 0,required:E?``:void 0,className:N||void 0,...X&&!Y?Z:null,...R}),H]}),$=Y?p(`div`,{...X?Z:null,className:`input-affixed`,children:[S!=null&&f(`span`,{className:`affix affix-pre`,children:S}),Q,C!=null&&f(`span`,{className:`affix affix-suf`,children:C})]}):Q;if(X)return $;let ce=[`field`,P].filter(Boolean).join(` `);return p(`div`,{...Z,className:ce,children:[T&&!K&&p(`label`,{className:`label`,htmlFor:G,children:[T,E&&f(r,{}),k&&f(n,{label:A,children:k})]}),K?p(`div`,{className:`field-float`,children:[Q,p(`label`,{className:`float-label`,htmlFor:G,children:[T,E&&f(r,{})]})]}):$,f(te,{error:D,hint:O,errorId:q,hintId:J})]})});export{m as default};

package/dist/components/AppShell.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppAvatar.js";import{navMatchScore as a}from"../lib/navMatch.js";import{readShellCollapsed as o,writeShellCollapsed as s}from"../lib/shellCookie.js";import{initScrollEdges as c}from"@webority/ui-elements/helpers";import{useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";var _=99,v=4,y=5,b=[`prefix`,`exact`],x=[`comfortable`,`compact`],S=[`default`,`primary`],C=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],w=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),T=e=>e>_?`${_}+`:String(e);function E(i){let{groups:a=[],brand:u,sidebarStart:m,sidebarStartCompact:_,sidebarFooter:v,topbarStart:y,topbarEnd:b,footer:C,launcher:w,children:T,collapsed:E,onCollapsedChange:O,noSidebar:j=!1,density:N=`comfortable`,topbarTone:P=`default`,navLabel:F=`Main navigation`,linkComponent:I,currentPath:L,rememberCollapsed:R=!1,collapsedCookie:z=`wui-shell-collapsed`,tabBarLabel:B=`Quick navigation`,moreLabel:V=`More`,userMenu:H,notifications:U,search:W,className:G=``,...K}=i;n(`AppShell`,K),t(`AppShell`,`density`,N,x),t(`AppShell`,`topbarTone`,P,S);let[q,re]=p(()=>R&&E===void 0&&typeof document<`u`?o(z)??!1:!1),[J,Y]=p(!1),[ie,ae]=p(!1),[oe,se]=p(!1),X=f(null),Z=E??q,ce=()=>{let e=!Z;E===void 0&&re(e),R&&s(e,z),O?.(e)},Q=d(()=>D(a,L),[a,L]),$=j?null:k(Q);return l(()=>{let e=()=>ae(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),l(()=>{c()},[]),l(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),l(()=>{let e=X.current;if(!e)return;let t=()=>se(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),l(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),g(`div`,{className:[`app-shell`,Z?`collapsed`:``,j?`no-sidebar`:``,J?`mobile-open`:``,G].filter(Boolean).join(` `),"data-density":N===`compact`?`compact`:void 0,...e(`AppShell`,i),...K,children:[h(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),g(`aside`,{className:`app-sidebar`,children:[u&&h(`div`,{className:`app-sidebar-brand`,children:u}),m&&h(`div`,{className:`app-sidebar-start`,children:m}),_&&h(`div`,{className:`app-sidebar-start-compact`,children:_}),h(`nav`,{className:`app-sidebar-scroll`,"aria-label":F,ref:X,tabIndex:oe?0:void 0,children:Q.map((e,t)=>g(`div`,{className:`app-nav-group`,children:[e.label&&h(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>h(M,{item:e,linkComponent:I,onNavigate:()=>Y(!1)},e.key??e.href??e.label)),e.after&&h(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),v&&h(`div`,{className:`app-sidebar-foot`,children:v}),!j&&h(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:ce,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:h(r,{name:`chevrons-left`,size:20})})]}),g(`div`,{className:`app-main`,children:[g(`header`,{className:`app-topbar${ie?` scrolled`:``}`,"data-tone":P===`primary`?`primary`:void 0,children:[g(`div`,{className:`app-topbar-start`,children:[h(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:h(r,{name:`menu`,size:18})}),y,W&&h(ne,{config:W})]}),g(`div`,{className:`app-topbar-end`,children:[b,U&&h(te,{config:U}),H&&h(ee,{config:H,linkComponent:I})]})]}),h(`main`,{className:`app-content`,id:`main-content`,children:T}),C&&h(`footer`,{className:`app-footer`,children:C})]}),w&&h(`div`,{className:`wui-shell-launcher`,children:w}),$&&g(`nav`,{className:`wui-tabbar`,"aria-label":B,children:[$.tabs.map(e=>h(A,{tab:e,linkComponent:I},e.key??e.href)),$.hasMore&&g(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[h(`span`,{className:`wui-tabbar-icon`,children:h(r,{name:`more`,size:24})}),h(`span`,{className:`wui-tabbar-label`,children:V})]})]}),h(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function D(e,r){let i=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),o=e.map(e=>({...e,items:i(e.items)})).filter(e=>e.items.length>0),s=[],c=e=>{for(let t of e)s.push(t),t.children&&c(t.children)};for(let e of o)c(e.items);for(let e of s)n(`AppShell items`,O(e)),t(`AppShell`,`match`,e.match,b),t(`AppShell`,`iconVariant`,e.iconVariant,C);let l=null;if(r!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let t of s){if(t.active!=null||t.children?.length&&!t.href)continue;let n=a(r,t.href,{exact:t.match===`exact`,also:t.matchAlso});if(n<0)continue;let i=t.match===`exact`&&a(r,t.href,{exact:!0})>=0?1/0:n;i>e&&(e=i,l=t)}}for(let e of s)e.active=e.active??e===l;return o}function O(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!w.has(e)))}function k(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?v:y;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function A({tab:e,linkComponent:t}){let n=`wui-tabbar-item${e.active?` active`:``}`,i=g(m,{children:[e.icon&&h(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:24}):e.icon}),h(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&h(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),a=e.active?`page`:void 0;return t?h(t,{className:n,to:e.href,"aria-current":a,children:i}):h(`a`,{className:n,href:e.href,"aria-current":a,children:i})}function j(e){for(let t of e){if(t.active)return t;let e=t.children?.length?j(t.children):void 0;if(e)return e}}function M({item:e,linkComponent:t,onNavigate:n,depth:i=0}){let a=i>0,o=i>1?` wui-nav-depth-${Math.min(i,6)}`:``,s=Array.isArray(e.children)&&e.children.length>0,c=s?j(e.children):void 0,u=!!c,d=c?c.key??c.href??c.label:null,[f,_]=p(u);l(()=>{d!=null&&_(!0)},[d]);let v=typeof e.label==`string`?e.label:void 0,y=!a&&e.icon&&h(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant}):e.icon}),b=e.badge!=null&&h(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),x=g(m,{children:[y,h(`span`,{className:`app-nav-text`,children:e.label}),b,e.trailingIcon&&h(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?h(r,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),S=e.active?`page`:void 0;if(s){let s=h(`div`,{className:`app-nav-sub${f?` expanded`:``}`,inert:!f,"aria-hidden":!f||void 0,children:h(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>h(M,{item:e,linkComponent:t,onNavigate:n,depth:i+1},e.key??e.href))})});if(e.href){let i=t?h(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":S,onClick:n,children:x}):h(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":S,onClick:n,children:x});return g(m,{children:[g(`div`,{className:`app-nav-item has-children wui-nav-split${a?` app-nav-subitem`:``}${u||e.active?` active`:``}${o}`,"data-label":v,children:[i,h(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":f,"aria-label":`Show or hide ${v??``} pages`,onClick:()=>_(e=>!e),children:h(r,{name:`chevron-right`,size:16})})]}),s]})}return g(m,{children:[g(`button`,{type:`button`,className:`app-nav-item${a?` app-nav-subitem`:``} has-children${u?` active`:``}${o}`,"aria-expanded":f,"data-label":v,onClick:()=>_(e=>!e),children:[y,h(`span`,{className:`app-nav-text`,children:e.label}),b,h(`span`,{className:`app-nav-caret`,children:h(r,{name:`chevron-right`,size:16})})]}),s]})}let C=`app-nav-item${a?` app-nav-subitem`:``}${e.active?` active`:``}${o}`;return t?h(t,{className:C,to:e.href,"aria-current":S,"data-label":v,onClick:n,children:x}):h(`a`,{className:C,href:e.href,"aria-current":S,"data-label":v,onClick:n,children:x})}function N(){let[e,t]=p(!1),n=f(null);return l(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function ee({config:e,linkComponent:t}){let n=u(),{open:a,setOpen:o,ref:s}=N(),{name:c,role:l,photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?h(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):h(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=g(m,{children:[h(r,{name:`log-out`,size:18}),y]});return g(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[g(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[h(i,{name:c,src:d,tone:`auto`}),g(`span`,{className:`wui-usermenu-text`,children:[h(`span`,{className:`wui-usermenu-name`,children:c}),l&&h(`span`,{className:`wui-usermenu-role`,children:l})]}),h(r,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":n,"data-bs-popper":a?`static`:void 0,children:[g(`div`,{className:`wui-usermenu-head`,children:[h(i,{name:c,src:d,size:`lg`,tone:`auto`}),g(`div`,{className:`wui-usermenu-who`,children:[h(`div`,{className:`wui-usermenu-name`,children:c}),l&&h(`div`,{className:`wui-usermenu-role`,children:l})]})]}),f&&S(f,g(m,{children:[h(r,{name:`user`,size:18}),p]}),void 0,x),b.map(e=>{if(e.divider)return h(`hr`,{className:`dropdown-divider`},e.key);let t=g(m,{children:[e.icon&&h(r,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,n):h(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),v?h(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:h(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&h(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function te({config:e}){let t=u(),{open:n,setOpen:i,ref:a}=N(),{unread:o=0,items:s,loading:c=!1,onOpen:d,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[x,S]=p(``),C=f(o);l(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${T(o)} unread notifications`))},[o]);let w=null;return s?.length?w=h(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=g(m,{children:[h(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&h(`span`,{className:`wui-bell-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-bell-body`,children:[!e.read&&h(`span`,{className:`visually-hidden`,children:`Unread: `}),h(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&h(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?h(`a`,{className:n,href:e.href,"data-id":e.id,children:i},e.id??t):h(`div`,{className:n,"data-id":e.id,children:i},e.id??t)})}):c?w=h(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=h(`div`,{className:`wui-bell-state`,children:b})),g(`div`,{className:`dropdown wui-bell`,ref:a,children:[g(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?y:`${y}, ${T(o)} unread`,onClick:()=>{let e=!n;i(e),e&&d?.()},children:[h(r,{name:`notification`,size:20}),h(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:T(o)})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[g(`div`,{className:`wui-bell-head`,children:[h(`span`,{className:`wui-bell-title`,children:y}),_&&h(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),h(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),v&&h(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var P=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function ne({config:e}){let t=u(),{value:n=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:m=`Search`}=e,[_,v]=p(!1),[y,b]=p(!1),[x,S]=p({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=f(null),E=f(null),D=f([]),O=d(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;l(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||P(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},M=-1;return D.current=[],g(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[h(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":m,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:h(r,{name:`search`,size:20})}),g(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[g(`div`,{className:`search-wrap`,children:[h(r,{name:`search`,size:18,className:`search-icon`}),h(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:m,"aria-label":m,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:j})]}),h(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&g(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&g(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>g(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&h(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return g(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&h(`span`,{className:`wui-topsearch-hit-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-topsearch-hit-text`,children:[h(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&h(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{E as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppAvatar.js";import{navMatchScore as a}from"../lib/navMatch.js";import{readShellCollapsed as o,writeShellCollapsed as s}from"../lib/shellCookie.js";import{initScrollEdges as c}from"@webority/ui-elements/helpers";import{useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";var _=99,v=4,y=5,b=[`prefix`,`exact`],x=[`comfortable`,`compact`],S=[`default`,`primary`],C=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],w=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),T=e=>e>_?`${_}+`:String(e);function E(i){let{groups:a=[],brand:u,sidebarStart:m,sidebarStartCompact:_,sidebarFooter:v,topbarStart:y,topbarEnd:b,footer:w,launcher:T,children:E,collapsed:O,onCollapsedChange:j,noSidebar:N=!1,density:F=`comfortable`,itemHeight:I,iconVariant:L,topbarTone:R=`default`,navLabel:ne=`Main navigation`,linkComponent:z,currentPath:B,rememberCollapsed:V=!1,collapsedCookie:H=`wui-shell-collapsed`,tabBarLabel:re=`Quick navigation`,moreLabel:ie=`More`,userMenu:U,notifications:W,search:G,className:ae=``,style:K,...q}=i;n(`AppShell`,q),t(`AppShell`,`density`,F,x),t(`AppShell`,`topbarTone`,R,S),t(`AppShell`,`iconVariant`,L,C);let oe=I>0?{...K,"--wui-nav-item-height":`${I}px`}:K,[se,ce]=p(()=>V&&O===void 0&&typeof document<`u`?o(H)??!1:!1),[J,Y]=p(!1),[le,ue]=p(!1),[de,fe]=p(!1),X=f(null),Z=O??se,pe=()=>{let e=!Z;O===void 0&&ce(e),V&&s(e,H),j?.(e)},Q=d(()=>D(a,B),[a,B]),$=N?null:k(Q);return l(()=>{let e=()=>ue(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),l(()=>{c()},[]),l(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),l(()=>{let e=X.current;if(!e)return;let t=()=>fe(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),l(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),g(`div`,{className:[`app-shell`,Z?`collapsed`:``,N?`no-sidebar`:``,J?`mobile-open`:``,ae].filter(Boolean).join(` `),"data-density":F===`compact`?`compact`:void 0,style:oe,...e(`AppShell`,i),...q,children:[h(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),g(`aside`,{className:`app-sidebar`,children:[u&&h(`div`,{className:`app-sidebar-brand`,children:u}),m&&h(`div`,{className:`app-sidebar-start`,children:m}),_&&h(`div`,{className:`app-sidebar-start-compact`,children:_}),h(`nav`,{className:`app-sidebar-scroll`,"aria-label":ne,ref:X,tabIndex:de?0:void 0,children:Q.map((e,t)=>g(`div`,{className:`app-nav-group`,children:[e.label&&h(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>h(M,{item:e,linkComponent:z,onNavigate:()=>Y(!1),iconVariant:L},e.key??e.href??e.label)),e.after&&h(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),v&&h(`div`,{className:`app-sidebar-foot`,children:v}),!N&&h(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:pe,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:h(r,{name:`chevrons-left`,size:20})})]}),g(`div`,{className:`app-main`,children:[g(`header`,{className:`app-topbar${le?` scrolled`:``}`,"data-tone":R===`primary`?`primary`:void 0,children:[g(`div`,{className:`app-topbar-start`,children:[h(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:h(r,{name:`menu`,size:18})}),y,G&&h(te,{config:G})]}),g(`div`,{className:`app-topbar-end`,children:[b,W&&h(ee,{config:W}),U&&h(P,{config:U,linkComponent:z})]})]}),h(`main`,{className:`app-content`,id:`main-content`,children:E}),w&&h(`footer`,{className:`app-footer`,children:w})]}),T&&h(`div`,{className:`wui-shell-launcher`,children:T}),$&&g(`nav`,{className:`wui-tabbar`,"aria-label":re,children:[$.tabs.map(e=>h(A,{tab:e,linkComponent:z,iconVariant:L},e.key??e.href)),$.hasMore&&g(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[h(`span`,{className:`wui-tabbar-icon`,children:h(r,{name:`more`,size:24})}),h(`span`,{className:`wui-tabbar-label`,children:ie})]})]}),h(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function D(e,r){let i=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),o=e.map(e=>({...e,items:i(e.items)})).filter(e=>e.items.length>0),s=[],c=e=>{for(let t of e)s.push(t),t.children&&c(t.children)};for(let e of o)c(e.items);for(let e of s)n(`AppShell items`,O(e)),t(`AppShell`,`match`,e.match,b),t(`AppShell`,`iconVariant`,e.iconVariant,C);let l=null;if(r!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let t of s){if(t.active!=null||t.children?.length&&!t.href)continue;let n=a(r,t.href,{exact:t.match===`exact`,also:t.matchAlso});if(n<0)continue;let i=t.match===`exact`&&a(r,t.href,{exact:!0})>=0?1/0:n;i>e&&(e=i,l=t)}}for(let e of s)e.active=e.active??e===l;return o}function O(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!w.has(e)))}function k(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?v:y;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function A({tab:e,linkComponent:t,iconVariant:n}){let i=`wui-tabbar-item${e.active?` active`:``}`,a=g(m,{children:[e.icon&&h(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:24,variant:e.iconVariant??n}):e.icon}),h(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&h(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),o=e.active?`page`:void 0;return t?h(t,{className:i,to:e.href,"aria-current":o,children:a}):h(`a`,{className:i,href:e.href,"aria-current":o,children:a})}function j(e){for(let t of e){if(t.active)return t;let e=t.children?.length?j(t.children):void 0;if(e)return e}}function M({item:e,linkComponent:t,onNavigate:n,depth:i=0,iconVariant:a}){let o=i>0,s=i>1?` wui-nav-depth-${Math.min(i,6)}`:``,c=Array.isArray(e.children)&&e.children.length>0,u=c?j(e.children):void 0,d=!!u,f=u?u.key??u.href??u.label:null,[_,v]=p(d);l(()=>{f!=null&&v(!0)},[f]);let y=typeof e.label==`string`?e.label:void 0,b=!o&&e.icon&&h(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant??a}):e.icon}),x=e.badge!=null&&h(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),S=g(m,{children:[b,h(`span`,{className:`app-nav-text`,children:e.label}),x,e.trailingIcon&&h(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?h(r,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),C=e.active?`page`:void 0;if(c){let c=h(`div`,{className:`app-nav-sub${_?` expanded`:``}`,inert:!_,"aria-hidden":!_||void 0,children:h(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>h(M,{item:e,linkComponent:t,onNavigate:n,depth:i+1,iconVariant:a},e.key??e.href))})});if(e.href){let i=t?h(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":C,onClick:n,children:S}):h(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":C,onClick:n,children:S});return g(m,{children:[g(`div`,{className:`app-nav-item has-children wui-nav-split${o?` app-nav-subitem`:``}${d||e.active?` active`:``}${s}`,"data-label":y,children:[i,h(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":_,"aria-label":`Show or hide ${y??``} pages`,onClick:()=>v(e=>!e),children:h(r,{name:`chevron-right`,size:16})})]}),c]})}return g(m,{children:[g(`button`,{type:`button`,className:`app-nav-item${o?` app-nav-subitem`:``} has-children${d?` active`:``}${s}`,"aria-expanded":_,"data-label":y,onClick:()=>v(e=>!e),children:[b,h(`span`,{className:`app-nav-text`,children:e.label}),x,h(`span`,{className:`app-nav-caret`,children:h(r,{name:`chevron-right`,size:16})})]}),c]})}let w=`app-nav-item${o?` app-nav-subitem`:``}${e.active?` active`:``}${s}`;return t?h(t,{className:w,to:e.href,"aria-current":C,"data-label":y,onClick:n,children:S}):h(`a`,{className:w,href:e.href,"aria-current":C,"data-label":y,onClick:n,children:S})}function N(){let[e,t]=p(!1),n=f(null);return l(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function P({config:e,linkComponent:t}){let n=u(),{open:a,setOpen:o,ref:s}=N(),{name:c,role:l,photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?h(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):h(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=g(m,{children:[h(r,{name:`log-out`,size:18}),y]});return g(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[g(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[h(i,{name:c,src:d,tone:`auto`}),g(`span`,{className:`wui-usermenu-text`,children:[h(`span`,{className:`wui-usermenu-name`,children:c}),l&&h(`span`,{className:`wui-usermenu-role`,children:l})]}),h(r,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":n,"data-bs-popper":a?`static`:void 0,children:[g(`div`,{className:`wui-usermenu-head`,children:[h(i,{name:c,src:d,size:`lg`,tone:`auto`}),g(`div`,{className:`wui-usermenu-who`,children:[h(`div`,{className:`wui-usermenu-name`,children:c}),l&&h(`div`,{className:`wui-usermenu-role`,children:l})]})]}),f&&S(f,g(m,{children:[h(r,{name:`user`,size:18}),p]}),void 0,x),b.map(e=>{if(e.divider)return h(`hr`,{className:`dropdown-divider`},e.key);let t=g(m,{children:[e.icon&&h(r,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,n):h(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),v?h(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:h(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&h(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function ee({config:e}){let t=u(),{open:n,setOpen:i,ref:a}=N(),{unread:o=0,items:s,loading:c=!1,onOpen:d,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[x,S]=p(``),C=f(o);l(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${T(o)} unread notifications`))},[o]);let w=null;return s?.length?w=h(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=g(m,{children:[h(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&h(`span`,{className:`wui-bell-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-bell-body`,children:[!e.read&&h(`span`,{className:`visually-hidden`,children:`Unread: `}),h(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&h(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?h(`a`,{className:n,href:e.href,"data-id":e.id,children:i},e.id??t):h(`div`,{className:n,"data-id":e.id,children:i},e.id??t)})}):c?w=h(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=h(`div`,{className:`wui-bell-state`,children:b})),g(`div`,{className:`dropdown wui-bell`,ref:a,children:[g(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?y:`${y}, ${T(o)} unread`,onClick:()=>{let e=!n;i(e),e&&d?.()},children:[h(r,{name:`notification`,size:20}),h(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:T(o)})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[g(`div`,{className:`wui-bell-head`,children:[h(`span`,{className:`wui-bell-title`,children:y}),_&&h(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),h(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),v&&h(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var F=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function te({config:e}){let t=u(),{value:n=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:m=`Search`}=e,[_,v]=p(!1),[y,b]=p(!1),[x,S]=p({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=f(null),E=f(null),D=f([]),O=d(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;l(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||F(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},M=-1;return D.current=[],g(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[h(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":m,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:h(r,{name:`search`,size:20})}),g(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[g(`div`,{className:`search-wrap`,children:[h(r,{name:`search`,size:18,className:`search-icon`}),h(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:m,"aria-label":m,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:j})]}),h(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&g(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&g(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>g(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&h(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return g(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&h(`span`,{className:`wui-topsearch-hit-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-topsearch-hit-text`,children:[h(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&h(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{E as default};

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

@@ -11,7 +11,7 @@
  *   `accent` adds the thick left edge that marks such an aside.
  *
  * @param {object} props
- * @param {"info"|"success"|"warning"|"danger"} [props.variant="info"]
+ * @param {"info"|"success"|"warning"|"danger"|"neutral"} [props.variant="info"] `neutral` is a plain notice in ink on a grey surface, with no semantic colour.
  * @param {import('react').ReactNode} props.children The alert body.
  * @param {import('react').ReactNode} [props.title] A bold heading line above the body (`.alert-heading`).
  * @param {string|import('react').ReactNode} [props.icon] A leading glyph — a semantic icon name or a node. Defaults to the variant's badge glyph; pass `null` for none.
@@ -33,7 +33,7 @@
  *   explanatory page content, which must not interrupt a screen reader.
  */
 export default function AppAlert(props: {
-    variant?: "info" | "success" | "warning" | "danger";
+    variant?: "info" | "success" | "warning" | "danger" | "neutral";
     children: import('react').ReactNode;
     title?: import('react').ReactNode;
     icon?: string | import('react').ReactNode;

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

@@ -1 +1,22 @@
-export default function AppAvatarGroup(props: any): import("react").JSX.Element;
+/**
+ * A row of overlapping avatars: the people on a project, a team, the reviewers on a doc.
+ *
+ * Composition, not data: you render the `AppAvatar` children yourself, and the group only lays
+ * them out. Each avatar gets a surface-coloured ring so it reads against its neighbour. The look
+ * comes from `@webority/theme`, so React `<AppAvatarGroup>` and Razor `<app-avatar-group>` render
+ * identically.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children The `AppAvatar`s to overlap.
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|number|string} [props.size] Sizes the whole row at once. It sets `--avatar-size` on the group, which each avatar and the "+N" chip inherit; a child with its own size still wins.
+ * @param {"tight"|"normal"|"loose"} [props.spacing="normal"] How far the avatars overlap.
+ * @param {number|string} [props.overflow] The hidden count, shown as a "+N" chip after the avatars. Zero or unset shows no chip.
+ * @param {string} [props.className=""] Extra classes on the group.
+ */
+export default function AppAvatarGroup(props: {
+    children: import('react').ReactNode;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number | string;
+    spacing?: "tight" | "normal" | "loose";
+    overflow?: number | string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -10,6 +10,7 @@
  * @param {import('react').ReactNode} [props.subtitle] Muted line under the title.
  * @param {string} [props.headerIcon] Leading header glyph — an Icon name (or a node).
  * @param {string} [props.titleClassName]
+ * @param {"sans"|"serif"} [props.titleFont="sans"] Face of the title. `serif` draws it in the display typeface.
  * @param {import('react').ReactNode} [props.header] Fully custom header — overrides title/subtitle/icon/extra/actions.
  * @param {import('react').ReactNode} [props.headerExtra]
  * @param {import('react').ReactNode} [props.headerActions] Right-aligned header controls.
@@ -40,6 +41,7 @@ export default function AppCard(props: {
     subtitle?: import('react').ReactNode;
     headerIcon?: string;
     titleClassName?: string;
+    titleFont?: "sans" | "serif";
     header?: import('react').ReactNode;
     headerExtra?: import('react').ReactNode;
     headerActions?: import('react').ReactNode;

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

@@ -1 +1,41 @@
-export default function AppConfirmDialog(props: any): import("react").JSX.Element;
+/**
+ * Destructive or confirm step built on AppModal.
+ *
+ * @param {object} props
+ * @param {boolean} props.open Shows the dialog while true.
+ * @param {string} props.title The dialog heading.
+ * @param {import('react').ReactNode} [props.message] The text that explains what the user is confirming.
+ * @param {string} [props.confirmLabel="Confirm"] The confirm button's text.
+ * @param {string} [props.cancelLabel="Cancel"] The cancel button's text.
+ * @param {boolean} [props.danger=false] Styles the confirm button as destructive; with no `tone` it also picks the delete icon.
+ * @param {"success"|"error"|"warning"|"info"|"delete"|"primary"} [props.tone] The status icon. Unset, it is `delete` when `danger` is set and `info` otherwise.
+ * @param {string} [props.image] URL of a custom illustration that replaces the tone artwork. Any source size is fine: the theme boxes it to the same footprint. It is decorative, rendered aria-hidden with an empty alt, so the title and message carry the meaning.
+ * @param {number} [props.iconSize] Width and height of the illustration in px, for the tone artwork and a custom `image` alike. Unset, it is 120px with a message and 84px without.
+ * @param {string} [props.confirmPhrase] Exact text the user must type before Confirm unlocks, e.g. a workspace name.
+ * @param {() => void} props.onConfirm Runs when Confirm is pressed.
+ * @param {() => void} [props.onClose] Runs when the dialog is dismissed through Cancel, the backdrop or Escape, unless `loading` blocks it.
+ * @param {boolean} [props.loading=false] Busy state: shows a spinner and disables Confirm, Cancel and the confirm-phrase field, and blocks dismissal while the async action is in flight.
+ * @param {boolean} [props.staticBackdrop=false] Passed to AppModal: when true, a backdrop click and Escape no longer close the dialog.
+ * @param {'center'|'top'} [props.placement='center'] Vertical placement of the card: centred, or pinned near the top.
+ * @param {'sm'|'md'|'lg'|'xl'|number} [props.size='md'] Card width: a preset, or an exact max-width in px for a custom size.
+ * @param {string} [props.className=""] Merged with the dialog's own `wui-confirm` class.
+ */
+export default function AppConfirmDialog(props: {
+    open: boolean;
+    title: string;
+    message?: import('react').ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+    tone?: "success" | "error" | "warning" | "info" | "delete" | "primary";
+    image?: string;
+    iconSize?: number;
+    confirmPhrase?: string;
+    onConfirm: () => void;
+    onClose?: () => void;
+    loading?: boolean;
+    staticBackdrop?: boolean;
+    placement?: 'center' | 'top';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | number;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -1 +1,21 @@
-export default function AppInfoTip(props: any): import("react").JSX.Element;
+/**
+ * Generic info popover beside a field label, the same Bootstrap popover as the Razor `<app-info-tip>`.
+ *
+ * A small "?" trigger opens the popover on hover or focus. A glossary-backed tip wraps this and
+ * passes the looked-up entry as children, so the glossary never enters the shared library.
+ * Implemented as a thin wrapper over AppPopover with hover and focus triggers.
+ *
+ * @param {object} props
+ * @param {string} [props.label] The popover title, and the trigger's accessible name. Unset, the trigger is named "More information".
+ * @param {import('react').ReactNode} [props.children] The popover body. Supply a label, a body, or both: a body-less tip is a heading, a title-less tip is just the body. With neither, the tip renders nothing.
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.placement="auto"] Where the popover opens; `auto` flips it to stay in view.
+ * @param {"sm"|"md"|"lg"|"xl"} [props.width="md"] The widest the card grows before its text wraps: 220, 276, 360 or 480px. It is a maximum, so a short tip stays as narrow as its text.
+ * @param {string} [props.className=""] Extra classes on the wrapper.
+ */
+export default function AppInfoTip(props: {
+    label?: string;
+    children?: import('react').ReactNode;
+    placement?: "auto" | "top" | "bottom" | "start" | "end";
+    width?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -7,7 +7,7 @@ declare const AppInput: import("react").ForwardRefExoticComponent<{
     help?: import('react').ReactNode;
     helpLabel?: string;
     type?: string;
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg" | "xl";
     leftIcon?: string;
     rightIcon?: string;
     onRightIconClick?: () => void;

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

@@ -1 +1,47 @@
-export default function AppLink(props: any): import("react").JSX.Element;
+/**
+ * A text link with a choice of hover animation and optional leading or trailing icons.
+ *
+ * Use it for inline prose links, footer links, "read more" affordances, and marketing
+ * call-to-action links: anywhere a plain `<a>` would go but the hover should read as
+ * intentional. It is NOT a button (`AppButton`) and not a nav item inside `AppShell`;
+ * it is the styled anchor. Router-agnostic: pass `linkComponent` (e.g. react-router's
+ * `Link`) for an in-app destination and it receives `to` instead of `href`.
+ *
+ * Every `animation` is disabled under `prefers-reduced-motion: reduce`, where the link
+ * degrades to a static underline.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} [props.children] Link text. Wins over `label` when both are given.
+ * @param {import('react').ReactNode} [props.label] Link text as a prop, an alternative to `children` (mirrors the Razor `label` attribute).
+ * @param {string} [props.href] Destination, or `to` through `linkComponent`. Unset, the anchor has no href.
+ * @param {"underline"|"underline-center"|"static"|"slide"|"icon"|"highlight"|"bracket"|"fade"|"grow"|"glow"|"shine"|"none"} [props.animation="underline"]
+ *   Hover treatment: `underline` (line slides in left to right), `underline-center` (line grows
+ *   from the middle out), `static` (an always-visible single underline, no motion, the classic
+ *   link look), `slide` (label and icons nudge right), `icon` (a trailing icon slides and fades in,
+ *   defaulting to an arrow when no icon is given), `highlight` (a tinted background wipes across),
+ *   `bracket` (`[ ]` brackets slide in around the label), `fade` (colour or opacity shift only),
+ *   `grow` (letter-spacing opens up), `glow` (a soft accent glow), `shine` (a light shimmer
+ *   sweeps across the label), `none` (a plain coloured link, no underline, no motion).
+ * @param {string|import('react').ReactNode} [props.leftIcon=null] Leading glyph: a semantic icon name or a node.
+ * @param {string|import('react').ReactNode} [props.rightIcon=null] Trailing glyph: a semantic icon name or a node.
+ * @param {"sm"|"md"|"lg"} [props.size="md"] Text and icon size.
+ * @param {"default"|"dark"} [props.surface="default"] Set "dark" when the link sits on a dark panel, such as a dark hero or footer; the text turns light.
+ * @param {boolean} [props.external=false] Open in a new tab (adds `target` and `rel`).
+ * @param {boolean} [props.disabled=false] Render as unavailable (no navigation, `aria-disabled`).
+ * @param {import('react').ElementType} [props.linkComponent] Router link component; it receives `to` instead of `href`. Keeps the library router-agnostic.
+ * @param {string} [props.className=""] Extra classes on the anchor.
+ */
+export default function AppLink(props: {
+    children?: import('react').ReactNode;
+    label?: import('react').ReactNode;
+    href?: string;
+    animation?: "underline" | "underline-center" | "static" | "slide" | "icon" | "highlight" | "bracket" | "fade" | "grow" | "glow" | "shine" | "none";
+    leftIcon?: string | import('react').ReactNode;
+    rightIcon?: string | import('react').ReactNode;
+    size?: "sm" | "md" | "lg";
+    surface?: "default" | "dark";
+    external?: boolean;
+    disabled?: boolean;
+    linkComponent?: import('react').ElementType;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -1,2 +1,60 @@
 import "@webority/ui-elements/elements/image-crop";
-export default function AppLogoPicker(props: any): import("react").JSX.Element;
+/**
+ * Circular (or rounded or square) logo or avatar picker with an update overlay.
+ * Click or drag-and-drop a file onto the ring; a freshly picked file previews immediately
+ * (optimistic) while the caller uploads and reflects it back via `value`.
+ *
+ * @param {object} props
+ * @param {string|null} [props.value] Current image URL, or null.
+ * @param {import('react').ReactNode} [props.fallback] Shown when there is no image, e.g. initials.
+ * @param {string} [props.name] Form field name, so an uncontrolled form can post the file.
+ * @param {(file: File) => void} props.onPick Receives a validated File, the cropped one when `crop` is set.
+ * @param {() => void} [props.onRemove] Called when the × clears the logo. A just-picked image always shows the ×; an existing `value` needs onRemove for its × to appear, because the parent owns it.
+ * @param {boolean} [props.loading=false] Spinner and blocked interaction while the pick uploads.
+ * @param {boolean} [props.disabled=false] Non-busy, non-interactive state.
+ * @param {string} [props.accept="image/png,image/jpeg,image/webp"] The file types the picker accepts.
+ * @param {number} [props.maxSizeMb=5] Largest accepted file in MB, the shared DEFAULT_MAX_SIZE_MB unless set. 0 means no size limit: nothing is rejected for its size.
+ * @param {number|'free'} [props.crop] Opt-in crop step before upload. After the person chooses a file, a dialog lets them drag and zoom a frame over it, and `onPick` receives the cropped File (same image type, kept under `maxSizeMb`). A number is the frame's width divided by its height (`1` for an avatar); `'free'` lets them resize the frame. SVG files skip the dialog, and `maxSizeMb` then applies to the cropped result, not the original.
+ * @param {string} [props.overlayIcon="image"] Icon name for the hover overlay.
+ * @param {string} [props.overlayLabel="Update photo"] Text of the hover overlay.
+ * @param {string} [props.ariaLabel="Upload photo"] Accessible name of the upload button.
+ * @param {string} [props.removeLabel="Remove photo"] Accessible name and tooltip of the × control (`Remove logo` on a logo picker).
+ * @param {string} [props.label] Optional field label above the ring.
+ * @param {string} [props.hint] Optional helper text: below the ring when stacked, in the side column when inline or profile.
+ * @param {string} [props.error] Caller-supplied inline error. It wins over an automatic rejection reason.
+ * @param {'stacked'|'inline'|'profile'} [props.layout='stacked'] Ring only with the hint below (stacked); a profile row with the ring on the left and a title, subtitle and hint column beside it (inline); or the same identity block stacked and centred beneath the ring (profile).
+ * @param {import('react').ReactNode} [props.title] Bold primary text with the ring (inline and profile only).
+ * @param {import('react').ReactNode} [props.subtitle] Muted secondary text with the ring (inline and profile only).
+ * @param {boolean} [props.required=false] Marks the field as required.
+ * @param {'initials'|'avatar'} [props.variant='initials'] Placeholder style: initials text, or a standard avatar (a muted disc and a person icon when there are no initials).
+ * @param {'sm'|'md'|'lg'|number} [props.size='md'] A preset, or an exact ring diameter in px. The whole control (ring, initials font, overlay and placeholder icon) scales from it.
+ * @param {'circle'|'rounded'|'square'} [props.shape='circle'] Ring shape.
+ * @param {string} [props.className=""] Extra class on the field wrapper.
+ */
+export default function AppLogoPicker(props: {
+    value?: string | null;
+    fallback?: import('react').ReactNode;
+    name?: string;
+    onPick: (file: File) => void;
+    onRemove?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    accept?: string;
+    maxSizeMb?: number;
+    crop?: number | 'free';
+    overlayIcon?: string;
+    overlayLabel?: string;
+    ariaLabel?: string;
+    removeLabel?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    layout?: 'stacked' | 'inline' | 'profile';
+    title?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    required?: boolean;
+    variant?: 'initials' | 'avatar';
+    size?: 'sm' | 'md' | 'lg' | number;
+    shape?: 'circle' | 'rounded' | 'square';
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -2,6 +2,7 @@
  * Required-field asterisk shared by form primitives.
  * Colour comes from `.required` (theme `--wui-danger`) — never inline hex.
  *
+ * @param {{}} props Takes no props: the asterisk is fixed.
  * @returns {import('react').JSX.Element}
  */
-export default function AppRequiredMark(props: any): import('react').JSX.Element;
+export default function AppRequiredMark(props: {}): import('react').JSX.Element;

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

@@ -16,7 +16,7 @@ declare const AppSelect: import("react").ForwardRefExoticComponent<{
     searchPlaceholder?: string;
     searchable?: boolean;
     clearable?: boolean;
-    size?: "sm" | "lg";
+    size?: "sm" | "lg" | "xl";
     icon?: string;
     floatingLabel?: boolean;
     disabled?: boolean;

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

@@ -1,2 +1,36 @@
 import "@webority/ui-elements/elements/select";
-export default function AppSelectMini(props: any): import("react").JSX.Element;
+/**
+ * A compact select for toolbars and filters, drawn by the shared `<wui-select>` element in compact mode.
+ *
+ * @param {object} props
+ * @param {string} [props.value] The selected option's value. Unset, the control is cleared.
+ * @param {(value: string) => void} [props.onChange] Called with the new value when the user picks an option.
+ * @param {Array<{ value: string, label?: import('react').ReactNode, icon?: string }>} [props.options] The options. A node label renders as markup, and `icon` is a semantic icon name drawn before the label. Omitted, the select has no options.
+ * @param {string} [props.placeholder="Select..."] Text shown while no value is selected.
+ * @param {string} [props.name] Form field name of the select.
+ * @param {string} [props.ariaLabel] Accessible name of the select.
+ * @param {string} [props.id] Element id of the select.
+ * @param {boolean} [props.disabled] Disables the select so its value cannot change.
+ * @param {"sm"|"lg"} [props.size] Compact size around the default 32px picker.
+ * @param {string} [props.icon] A leading library icon, e.g. `funnel` or `sort-down`.
+ * @param {string} [props.prefix] Static text before the value, e.g. `Sort:`.
+ * @param {string} [props.className] Extra classes on the select, so a caller can position or space it.
+ */
+export default function AppSelectMini(props: {
+    value?: string;
+    onChange?: (value: string) => void;
+    options?: Array<{
+        value: string;
+        label?: import('react').ReactNode;
+        icon?: string;
+    }>;
+    placeholder?: string;
+    name?: string;
+    ariaLabel?: string;
+    id?: string;
+    disabled?: boolean;
+    size?: "sm" | "lg";
+    icon?: string;
+    prefix?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -203,6 +203,10 @@ export type SearchShape = {
  * @param {(collapsed: boolean) => void} [props.onCollapsedChange]
  * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard. No tab bar either.
  * @param {'comfortable'|'compact'} [props.density='comfortable'] Compact sets the content's top padding to 12px.
+ * @param {number} [props.itemHeight] The height of every sidebar row in px, in place of the density's row height.
+ *   Unset, the rows keep the density's height. A value above zero applies on every pointer, touch included.
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of every
+ *   sidebar icon, so one prop sets the look of the whole nav. An item's own `iconVariant` overrides it; `bulk` is the filled look.
  * @param {'default'|'primary'} [props.topbarTone='default'] The top bar's colour. primary paints the bar in the primary colour, with its text, menu button, bell and account menu in the ink that reads on it; the search field keeps its own surface.
  * @param {string} [props.navLabel='Main navigation']
  * @param {string} [props.currentPath] The current location; items without `active` are matched against it.
@@ -234,6 +238,8 @@ export default function AppShell(props: {
     onCollapsedChange?: (collapsed: boolean) => void;
     noSidebar?: boolean;
     density?: 'comfortable' | 'compact';
+    itemHeight?: number;
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
     topbarTone?: 'default' | 'primary';
     navLabel?: string;
     currentPath?: string;

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

@@ -1 +1,49 @@
-export default function AppSidebarMenu(props: any): import("react").JSX.Element;
+/**
+ * A slide-in sidebar or drawer panel on react-bootstrap `<Offcanvas>`.
+ *
+ * Offcanvas supplies the backdrop, slide animation, background scroll lock, Escape to close,
+ * focus trap and ARIA dialog wiring. Opens from either side, or from the top or bottom. Themed
+ * via the app tokens so it renders correctly in dark mode.
+ *
+ * @param {object} props
+ * @param {boolean} props.show Whether the panel is open. The caller owns this state.
+ * @param {() => void} props.onHide Closes the panel: the header close button, the backdrop and Escape.
+ * @param {"left"|"right"|"start"|"end"|"top"|"bottom"} [props.side="right"] The edge it opens from. `left` and `start` open from the start edge, `right` and `end` from the end edge.
+ * @param {import('react').ReactNode} props.children The panel body.
+ * @param {import('react').ReactNode} [props.title] Title of the default header bar. A text title also names the dialog, unless `ariaLabel` is set.
+ * @param {string} [props.titleIcon] Library icon beside the title in the default header bar.
+ * @param {import('react').ReactNode} [props.header] A custom header that replaces the default header bar entirely.
+ * @param {import('react').ReactNode} [props.footer] A sticky footer for action buttons.
+ * @param {string} [props.width] Panel width for a left or right panel, e.g. "480px". Unset, it is 420px. On a phone (below 576px) a left or right panel opens at the full screen width whatever this says; `maxWidth` still caps it there.
+ * @param {string} [props.maxWidth] Caps the panel width, e.g. "600px". Unset, the theme caps it at 92vw, so a fixed `width` still fits on a small viewport.
+ * @param {boolean|"static"} [props.backdrop=true] The dimming backdrop: `true` shows it and a click outside closes the panel; `false` removes it; `"static"` shows it and a click outside does not close.
+ * @param {boolean} [props.scroll=false] Allows the page behind the panel to scroll.
+ * @param {boolean} [props.keyboard=true] Escape closes the panel.
+ * @param {boolean} [props.closeButton=true] Shows the header close button.
+ * @param {string} [props.closeLabel="Close"] The close button's accessible name, for other languages.
+ * @param {string} [props.responsive] Breakpoint, e.g. `lg`, below which the panel acts as an offcanvas and at or above which it renders inline.
+ * @param {string} [props.className=""] Extra classes on the panel.
+ * @param {string} [props.bodyClassName=""] Classes on the scrollable body region.
+ * @param {string} [props.ariaLabel] Accessible name of the dialog. Unset, a text `title` names it.
+ */
+export default function AppSidebarMenu(props: {
+    show: boolean;
+    onHide: () => void;
+    side?: "left" | "right" | "start" | "end" | "top" | "bottom";
+    children: import('react').ReactNode;
+    title?: import('react').ReactNode;
+    titleIcon?: string;
+    header?: import('react').ReactNode;
+    footer?: import('react').ReactNode;
+    width?: string;
+    maxWidth?: string;
+    backdrop?: boolean | "static";
+    scroll?: boolean;
+    keyboard?: boolean;
+    closeButton?: boolean;
+    closeLabel?: string;
+    responsive?: string;
+    className?: string;
+    bodyClassName?: string;
+    ariaLabel?: string;
+}): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.86.0",
+  "version": "0.86.3",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.86.0",
-    "@webority/ui-elements": "0.86.0"
+    "@webority/theme": "0.86.3",
+    "@webority/ui-elements": "0.86.3"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",