@webority/ui-react 0.77.2 → 0.78.1

package/dist/components/AppButton.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{shortcutAria as n,shortcutChip as r}from"../lib/shortcutChip.js";import i from"./withTooltip.js";import a from"./AppIcon.js";import{Button as o}from"react-bootstrap";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l={primary:`primary`,secondary:`secondary`,outline:`outline-primary`,ghost:`ghost`,text:`text`,danger:`danger`,success:`success`,"secondary-danger":`secondary-danger`,"outline-danger":`outline-danger`,light:`light`,warning:`warning`,neutral:`neutral`,"outline-light":`outline-light`,"outline-secondary":`outline-secondary`},u={sm:14,md:16,lg:20},d=[`sheen`,`fill`,`expand`,`glow`,`roll`,`none`],f=[`rounded`,`pill`,`sharp`],p=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],m=e=>e===`pill`||e===`sharp`?`wui-btn-shape-${e}`:``;function h(e){return c(`span`,{className:`wui-btn-roll`,children:[s(`span`,{className:`wui-btn-roll__a`,children:e}),s(`span`,{className:`wui-btn-roll__b`,"aria-hidden":`true`,children:e})]})}function g(e,t,n,r){if(!e)return null;let i=n=>typeof e==`string`?s(a,{name:e,size:u[t]??u.md,variant:r,className:n}):s(`span`,{className:[`d-inline-flex`,n].filter(Boolean).join(` `),children:e});return c(`span`,{className:n?`wui-btn-roll-ico wui-btn-pin-icon`:`wui-btn-roll-ico ms-2`,"aria-hidden":`true`,children:[i(),i(`wui-btn-roll-ico__next`)]})}function _(e,t,n,r){if(!e)return null;let i=t===`left`?`me-2`:`ms-2`;return typeof e==`string`?s(a,{name:e,size:u[n]??u.md,variant:r,className:i}):s(`span`,{className:`d-inline-flex ${i}`,children:e})}function v(e,t,n){return e?s(`span`,{className:`wui-btn-pin-icon`,"aria-hidden":`true`,children:typeof e==`string`?s(a,{name:e,size:u[t]??u.md,variant:n}):e}):null}function y({children:a,variant:y=`primary`,size:b=`md`,type:x=`button`,loading:S=!1,disabled:C=!1,block:w=!1,leftIcon:T=null,rightIcon:E=null,href:D,static:O=!1,tooltip:k,tooltipPlacement:A,shortcut:j,animation:M,pinRightIcon:N=!1,shape:P=`rounded`,iconVariant:F,className:I=``,...L}){t(`AppButton`,L),M!==void 0&&e(`AppButton`,`animation`,M,d);let R=M===`roll`&&!O,z=N&&E!=null&&E!==``&&!O&&!S;if(e(`AppButton`,`variant`,y,Object.keys(l)),e(`AppButton`,`size`,b,Object.keys(u)),e(`AppButton`,`shape`,P,f),F!==void 0&&e(`AppButton`,`iconVariant`,F,p),O)return i(c(`span`,{className:[`btn`,`btn-${l[y]??`primary`}`,b===`sm`?`btn-sm`:b===`lg`?`btn-lg`:``,w?`w-100`:``,m(P),`btn-static`,I].filter(Boolean).join(` `),...L,children:[_(T,`left`,b,F),a,_(E,`right`,b,F)]}),k,A);let B=[w?`w-100`:``,S?`is-loading`:``,M&&d.includes(M)?`btn-anim-${M}`:``,z?`wui-btn-pin-end`:``,m(P),I].filter(Boolean).join(` `),V=(L.as===void 0||L.as===`button`)&&D===void 0&&L.to===void 0,H=V?{}:{role:void 0,tabIndex:C||S?-1:void 0},U=k!=null&&k!==``;return i(c(o,{type:V?x:void 0,href:D,variant:l[y]??`primary`,size:b===`md`?void 0:b,disabled:C||S,"aria-busy":S||void 0,"aria-keyshortcuts":n(j),className:B||void 0,...H,...L,children:[S&&s(`span`,{className:`spinner-border spinner-border-sm me-2`,"aria-hidden":`true`}),!S&&_(T,`left`,b,F),R?h(a):a,!S&&(R?g(E,b,z,F):z?v(E,b,F):_(E,`right`,b,F)),!U&&r(j)]}),k,A,j)}export{y as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{shortcutAria as n,shortcutChip as r}from"../lib/shortcutChip.js";import i from"./withTooltip.js";import a from"./AppIcon.js";import o from"./warnDeprecatedValue.js";import{Button as s}from"react-bootstrap";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u={primary:`primary`,secondary:`secondary`,outline:`outline-primary`,ghost:`ghost`,text:`text`,danger:`danger`,success:`success`,"secondary-danger":`secondary-danger`,"outline-danger":`outline-danger`,light:`light`,warning:`warning`,neutral:`neutral`,"outline-light":`outline-light`,"outline-secondary":`outline-secondary`},d={subtle:{use:`neutral`,removeIn:`0.79.0`}};function f(e){return`btn-${u[d[e]?.use??e]??`primary`}`}var p={sm:14,md:16,lg:20},m=[`sheen`,`fill`,`expand`,`glow`,`roll`,`none`],h=[`rounded`,`pill`,`sharp`],g=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],_=e=>e===`pill`||e===`sharp`?`wui-btn-shape-${e}`:``;function v(e){return l(`span`,{className:`wui-btn-roll`,children:[c(`span`,{className:`wui-btn-roll__a`,children:e}),c(`span`,{className:`wui-btn-roll__b`,"aria-hidden":`true`,children:e})]})}function y(e,t,n,r){if(!e)return null;let i=n=>typeof e==`string`?c(a,{name:e,size:p[t]??p.md,variant:r,className:n}):c(`span`,{className:[`d-inline-flex`,n].filter(Boolean).join(` `),children:e});return l(`span`,{className:n?`wui-btn-roll-ico wui-btn-pin-icon`:`wui-btn-roll-ico ms-2`,"aria-hidden":`true`,children:[i(),i(`wui-btn-roll-ico__next`)]})}function b(e,t,n,r){if(!e)return null;let i=t===`left`?`me-2`:`ms-2`;return typeof e==`string`?c(a,{name:e,size:p[n]??p.md,variant:r,className:i}):c(`span`,{className:`d-inline-flex ${i}`,children:e})}function x(e,t,n){return e?c(`span`,{className:`wui-btn-pin-icon`,"aria-hidden":`true`,children:typeof e==`string`?c(a,{name:e,size:p[t]??p.md,variant:n}):e}):null}function S({children:a,variant:f=`primary`,size:S=`md`,type:C=`button`,loading:w=!1,disabled:T=!1,block:E=!1,leftIcon:D=null,rightIcon:O=null,href:k,static:A=!1,tooltip:j,tooltipPlacement:M,shortcut:N,animation:P,pinRightIcon:F=!1,shape:I=`rounded`,iconVariant:L,className:R=``,...z}){t(`AppButton`,z),P!==void 0&&e(`AppButton`,`animation`,P,m);let B=P===`roll`&&!A,V=F&&O!=null&&O!==``&&!A&&!w;o(`AppButton`,`variant`,f,d);let H=d[f]?.use??f;if(e(`AppButton`,`variant`,H,Object.keys(u)),e(`AppButton`,`size`,S,Object.keys(p)),e(`AppButton`,`shape`,I,h),L!==void 0&&e(`AppButton`,`iconVariant`,L,g),A)return i(l(`span`,{className:[`btn`,`btn-${u[H]??`primary`}`,S===`sm`?`btn-sm`:S===`lg`?`btn-lg`:``,E?`w-100`:``,_(I),`btn-static`,R].filter(Boolean).join(` `),...z,children:[b(D,`left`,S,L),a,b(O,`right`,S,L)]}),j,M);let U=[E?`w-100`:``,w?`is-loading`:``,P&&m.includes(P)?`btn-anim-${P}`:``,V?`wui-btn-pin-end`:``,_(I),R].filter(Boolean).join(` `),W=(z.as===void 0||z.as===`button`)&&k===void 0&&z.to===void 0,G=W?{}:{role:void 0,tabIndex:T||w?-1:void 0},K=j!=null&&j!==``;return i(l(s,{type:W?C:void 0,href:k,variant:u[H]??`primary`,size:S===`md`?void 0:S,disabled:T||w,"aria-busy":w||void 0,"aria-keyshortcuts":n(N),className:U||void 0,...G,...z,children:[w&&c(`span`,{className:`spinner-border spinner-border-sm me-2`,"aria-hidden":`true`}),!w&&b(D,`left`,S,L),B?v(a):a,!w&&(B?y(O,S,V,L):V?x(O,S,L):b(O,`right`,S,L)),!K&&r(N)]}),j,M,N)}export{f as buttonVariantClass,S as default};

package/dist/components/AppChoiceCard.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";var o={sm:` wui-struct-card-sm`,md:``,lg:` wui-struct-card-lg`},s={inline:``,stacked:` wui-struct-card-stacked`},c={sm:16,md:18,lg:22};function l({name:l,multiple:u=!1,value:d,checked:f,onChange:p,icon:m,iconNode:h,iconSize:g,image:_,imageAlt:v=``,children:y,title:b,description:x,checkIcon:S=`check`,checkSize:C=18,hideCheck:w=!1,size:T=`md`,layout:E=`inline`,className:D=``,...O}){t(`AppChoiceCard`,O),e(`AppChoiceCard`,`size`,T,Object.keys(o)),e(`AppChoiceCard`,`layout`,E,Object.keys(s));let k=o[T]??``,A=s[E]??``,j=g??c[T]??c.md;return a(`label`,{className:`struct-card${_?` struct-card-img-card`:``}${k}${A}${w?` wui-struct-card-no-check`:``}${f?` checked`:``}${D?` ${D}`:``}`,...O,children:[i(`input`,{type:u?`checkbox`:`radio`,name:l,value:d,className:`struct-card-input`,checked:f,onChange:p}),_?i(`span`,{className:`struct-card-media`,children:i(`img`,{className:`struct-card-img`,src:_,alt:v})}):h||m?i(`span`,{className:`struct-card-ic`,children:h||i(n,{name:m,size:j,variant:f?`bold`:void 0})}):null,i(`span`,{className:`struct-card-body`,children:y||a(r,{children:[b&&i(`span`,{className:`struct-card-title`,children:b}),x&&i(`span`,{className:`struct-card-desc`,children:x})]})}),!w&&i(`span`,{className:`struct-card-check`,children:i(n,{name:S,size:C})})]})}export{l as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";var o={sm:` wui-struct-card-sm`,md:``,lg:` wui-struct-card-lg`},s={inline:``,stacked:` wui-struct-card-stacked`},c={sm:16,md:18,lg:22};function l({name:l,multiple:u=!1,value:d,checked:f,onChange:p,icon:m,iconNode:h,iconSize:g,image:_,imageAlt:v=``,children:y,title:b,description:x,checkIcon:S=`check`,checkSize:C=18,hideCheck:w=!1,disabled:T=!1,size:E=`md`,layout:D=`inline`,className:O=``,...k}){t(`AppChoiceCard`,k),e(`AppChoiceCard`,`size`,E,Object.keys(o)),e(`AppChoiceCard`,`layout`,D,Object.keys(s));let A=o[E]??``,j=s[D]??``,M=g??c[E]??c.md;return a(`label`,{className:`struct-card${_?` struct-card-img-card`:``}${A}${j}${w?` wui-struct-card-no-check`:``}${f?` checked`:``}${O?` ${O}`:``}`,"aria-disabled":T||void 0,...k,children:[i(`input`,{type:u?`checkbox`:`radio`,name:l,value:d,className:`struct-card-input`,checked:f,onChange:p,disabled:T}),_?i(`span`,{className:`struct-card-media`,children:i(`img`,{className:`struct-card-img`,src:_,alt:v})}):h||m?i(`span`,{className:`struct-card-ic`,children:h||i(n,{name:m,size:M,variant:f?`bold`:void 0})}):null,i(`span`,{className:`struct-card-body`,children:y||a(r,{children:[b&&i(`span`,{className:`struct-card-title`,children:b}),x&&i(`span`,{className:`struct-card-desc`,children:x})]})}),!w&&i(`span`,{className:`struct-card-check`,children:i(n,{name:S,size:C})})]})}export{l as default};

package/dist/components/AppConsentBanner.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./useWuiControl.js";import{useEffect as r}from"react";import{jsx as i}from"react/jsx-runtime";import"@webority/ui-elements/elements/consent-banner";import{getConsent as a,saveConsent as o}from"@webority/analytics/site";var s=[`bottom-left`,`bottom-right`],c=[`analytics`,`functional`,`marketing`];function l({heading:l,description:u,policyHref:d,policyLabel:f,analyticsDescription:p,functionalDescription:m,marketingDescription:h,categories:g,position:_=`bottom-left`,standalone:v=!1,className:y=``,style:b,...x}){t(`AppConsentBanner`,x),e(`AppConsentBanner`,`position`,_,s);for(let t of g??[])e(`AppConsentBanner`,`categories`,t,c);let{setRef:S,innerRef:C}=n({on:{"wui-consent-save":e=>{o(e.detail),C.current&&(C.current.preferences=a())}}});return r(()=>{let e=C.current;if(!e)return;let t=a();e.preferences=t,t.decided||e.open()},[C]),i(`wui-consent-banner`,{ref:S,position:_,heading:l||void 0,description:u||void 0,"policy-href":d||void 0,"policy-label":f||void 0,"analytics-description":p||void 0,"functional-description":m||void 0,"marketing-description":h||void 0,categories:g?.length?g.join(` `):void 0,standalone:v||void 0,class:y||void 0,style:b,...x})}export{l as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./useWuiControl.js";import{useEffect as r}from"react";import{jsx as i}from"react/jsx-runtime";import"@webority/ui-elements/elements/consent-banner";import{getConsent as a,saveConsent as o}from"@webority/analytics/site";var s=[`bottom-left`,`bottom-right`,`bar`],c=[`analytics`,`functional`,`marketing`];function l({heading:l,description:u,policyHref:d,policyLabel:f,analyticsDescription:p,functionalDescription:m,marketingDescription:h,categories:g,position:_=`bottom-left`,standalone:v=!1,className:y=``,style:b,...x}){t(`AppConsentBanner`,x),e(`AppConsentBanner`,`position`,_,s);for(let t of g??[])e(`AppConsentBanner`,`categories`,t,c);let{setRef:S,innerRef:C}=n({on:{"wui-consent-save":e=>{o(e.detail),C.current&&(C.current.preferences=a())}}});return r(()=>{let e=C.current;if(!e)return;let t=a();e.preferences=t,t.decided||e.open()},[C]),i(`wui-consent-banner`,{ref:S,position:_,heading:l||void 0,description:u||void 0,"policy-href":d||void 0,"policy-label":f||void 0,"analytics-description":p||void 0,"functional-description":m||void 0,"marketing-description":h||void 0,categories:g?.length?g.join(` `):void 0,standalone:v||void 0,class:y||void 0,style:b,...x})}export{l as default};

package/dist/components/AppFileAttachment.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import n from"../lib/FieldMessage.js";import{keyOf as r,nameOf as i,sizeLabelOf as a,useItemUrl as o}from"../lib/fileItem.js";import s from"../lib/FileItemRow.js";import{DEFAULT_IMAGE_ACCEPT as c,DEFAULT_MAX_SIZE_MB as l,acceptLabel as u,isImageFile as d,isImageOnlyAccept as f,validateFile as p}from"@webority/ui-elements/helpers";import{useId as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({label:i=`Attachment`,value:a,name:o,onChange:u,multiple:y=!1,accept:S=c,maxSizeMb:C=l,optional:w=!1,validate:T=!0,error:E,id:D,...O}){e(`AppFileAttachment`,O);let k=m(),A=D||k,[j,M]=h(``),N=y&&Array.isArray(a)?a:a?[a]:[],P=f(S),F=e=>e instanceof File?d(e):P||d(e),I=!y&&N.length===1&&F(N[0]),L=b(S,C);function R(e){let t=Array.from(e.target.files||[]);if(e.target.value=``,!t.length)return;let n=[],i=``;for(let e of t){let t=T?p(e,{accept:S,maxSizeMb:C}):null;if(t){i||=t;continue}n.push(e)}if(M(i),n.length)if(y){let e=Array.isArray(a)?a:a?[a]:[],t=new Set(e.map(r));u(e.concat(n.filter(e=>!t.has(r(e)))))}else u(n[0])}function z(e){M(``),u(y?N.filter((t,n)=>n!==e):null)}let B=E||j,V=B?`${A}-error`:void 0,H=y||N.length===0,U=P?`image`:`file`,W=y?`Add ${U}s`:`Add ${P?`an`:`a`} ${U}`;return v(`div`,{className:`field`,children:[v(`label`,{className:`label`,htmlFor:A,children:[i,w&&_(`span`,{className:`label-optional`,children:` (optional)`})]}),H&&v(g,{children:[v(`label`,{className:`attach-drop`,htmlFor:A,children:[_(`span`,{className:`attach-drop-icon`,children:_(t,{name:P?`image`:`file-text`,size:18})}),v(`span`,{className:`attach-drop-copy`,children:[_(`span`,{className:`attach-drop-title`,children:W}),L&&_(`span`,{className:`attach-drop-hint`,children:L})]}),_(`span`,{className:`attach-drop-cta`,children:`Browse`})]}),_(`input`,{id:A,type:`file`,className:`visually-hidden`,name:o,accept:S||void 0,multiple:y||void 0,"aria-describedby":V,onChange:R,...O})]}),I?_(x,{item:N[0],isImage:!0,onRemove:()=>z(0)}):N.length>0&&_(`div`,{className:`attach-list`,children:N.map((e,t)=>_(s,{item:e,isImage:F(e),onRemove:()=>z(t)},r(e)))}),_(n,{error:B,errorId:`${A}-error`})]})}function b(e,t){let n=e?.trim()?u(e):``,r=t>0?`up to ${t} MB`:``;return n&&r?`${n}, ${r}`:r?`Up to ${t} MB`:n}function x({item:e,isImage:n,onRemove:r}){let s=o(e,n),c=i(e),l=a(e);return v(`div`,{className:`attach-preview`,children:[v(`div`,{className:`attach-figure`,children:[_(`img`,{src:s,alt:c}),_(`button`,{type:`button`,className:`attach-remove`,"aria-label":`Remove attachment`,onClick:r,children:_(t,{name:`x`,size:18})})]}),v(`div`,{className:`attach-meta`,children:[_(`div`,{className:`attach-name`,children:c}),l&&_(`div`,{className:`attach-size`,children:l})]})]})}export{y as default};
+import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import n from"../lib/FieldMessage.js";import{keyOf as r,nameOf as i,sizeLabelOf as a,useItemUrl as o}from"../lib/fileItem.js";import s from"../lib/FileItemRow.js";import{DEFAULT_IMAGE_ACCEPT as c,DEFAULT_MAX_SIZE_MB as l,acceptLabel as u,isImageFile as d,isImageOnlyAccept as f,validateFile as p}from"@webority/ui-elements/helpers";import{useId as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({label:i=`Attachment`,value:a,name:o,onChange:u,multiple:y=!1,accept:S=c,maxSizeMb:C=l,optional:w=!1,validate:T=!0,error:E,id:D,...O}){e(`AppFileAttachment`,O);let k=m(),A=D||k,[j,M]=h(``),[N,P]=h(!1),F=y&&Array.isArray(a)?a:a?[a]:[],I=f(S),L=e=>e instanceof File?d(e):I||d(e),R=!y&&F.length===1&&L(F[0]),z=b(S,C);function B(e){if(!e.length)return;let t=[],n=``;for(let r of e){let e=T?p(r,{accept:S,maxSizeMb:C}):null;if(e){n||=e;continue}t.push(r)}if(M(n),t.length)if(y){let e=Array.isArray(a)?a:a?[a]:[],n=new Set(e.map(r));u(e.concat(t.filter(e=>!n.has(r(e)))))}else u(t[0])}function V(e){let t=Array.from(e.target.files||[]);e.target.value=``,B(t)}function H(e){M(``),u(y?F.filter((t,n)=>n!==e):null)}let U=E||j,W=U?`${A}-error`:void 0,G=y||F.length===0,K=I?`image`:`file`,q=y?`Add ${K}s`:`Add ${I?`an`:`a`} ${K}`;return v(`div`,{className:`field`,children:[v(`label`,{className:`label`,htmlFor:A,children:[i,w&&_(`span`,{className:`label-optional`,children:` (optional)`})]}),G&&v(g,{children:[v(`label`,{className:`attach-drop${N?` dragging`:``}`,htmlFor:A,onDragEnter:e=>{e.preventDefault(),O.disabled||P(!0)},onDragOver:e=>{e.preventDefault(),O.disabled||P(!0)},onDragLeave:e=>{e.preventDefault(),P(!1)},onDrop:e=>{e.preventDefault(),P(!1),!O.disabled&&B(Array.from(e.dataTransfer?.files||[]))},children:[_(`span`,{className:`attach-drop-icon`,children:_(t,{name:I?`image`:`file-text`,size:18})}),v(`span`,{className:`attach-drop-copy`,children:[_(`span`,{className:`attach-drop-title`,children:q}),z&&_(`span`,{className:`attach-drop-hint`,children:z})]}),_(`span`,{className:`attach-drop-cta`,children:`Browse`})]}),_(`input`,{id:A,type:`file`,className:`visually-hidden`,name:o,accept:S||void 0,multiple:y||void 0,"aria-describedby":W,onChange:V,...O})]}),R?_(x,{item:F[0],isImage:!0,onRemove:()=>H(0)}):F.length>0&&_(`div`,{className:`attach-list`,children:F.map((e,t)=>_(s,{item:e,isImage:L(e),onRemove:()=>H(t)},r(e)))}),_(n,{error:U,errorId:`${A}-error`})]})}function b(e,t){let n=e?.trim()?u(e):``,r=t>0?`up to ${t} MB`:``;return n&&r?`${n}, ${r}`:r?`Up to ${t} MB`:n}function x({item:e,isImage:n,onRemove:r}){let s=o(e,n),c=i(e),l=a(e);return v(`div`,{className:`attach-preview`,children:[v(`div`,{className:`attach-figure`,children:[_(`img`,{src:s,alt:c}),_(`button`,{type:`button`,className:`attach-remove`,"aria-label":`Remove attachment`,onClick:r,children:_(t,{name:`x`,size:18})})]}),v(`div`,{className:`attach-meta`,children:[_(`div`,{className:`attach-name`,children:c}),l&&_(`div`,{className:`attach-size`,children:l})]})]})}export{y as default};

package/dist/components/AppSplitButton.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppButton.js";import i from"./AppDropdown.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=[`sm`,`md`,`lg`],c=[`button`,`submit`,`reset`],l={sm:14,md:16,lg:20},u={sm:`btn-sm`,md:``,lg:`btn-lg`};function d({label:d,items:f=[],onClick:p,href:m,type:h=`button`,variant:g=`primary`,size:_=`md`,disabled:v=!1,loading:y=!1,leftIcon:b,shortcut:x,menuLabel:S=`More actions`,align:C=`end`,linkComponent:w,className:T=``,...E}){t(`AppSplitButton`,E),e(`AppSplitButton`,`size`,_,s),e(`AppSplitButton`,`type`,h,c);let D=[`btn`,g===`outline`?`btn-outline-primary`:`btn-${g}`,u[_]??``,`wui-split-toggle`].filter(Boolean).join(` `),O=a(n,{name:`chevron-down`,size:l[_]??l.md}),k=v||y;return o(`div`,{role:`group`,"aria-label":d,className:[`wui-split-button`,T].filter(Boolean).join(` `),...E,children:[a(r,{variant:g,size:_,type:h,href:m,onClick:p,disabled:v,loading:y,leftIcon:b,shortcut:x,children:d}),k?a(`div`,{className:`wui-split-menu`,children:a(`button`,{type:`button`,className:D,disabled:!0,"aria-label":S,children:O})}):a(i,{className:`wui-split-menu`,trigger:O,toggleClassName:D,label:S,ariaLabel:S,align:C,items:f,linkComponent:w})]})}export{d as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r,{buttonVariantClass as i}from"./AppButton.js";import a from"./AppDropdown.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`sm`,`md`,`lg`],l=[`button`,`submit`,`reset`],u={sm:14,md:16,lg:20},d={sm:`btn-sm`,md:``,lg:`btn-lg`};function f({label:f,items:p=[],onClick:m,href:h,type:g=`button`,variant:_=`primary`,size:v=`md`,disabled:y=!1,loading:b=!1,leftIcon:x,shortcut:S,menuLabel:C=`More actions`,align:w=`end`,linkComponent:T,className:E=``,...D}){t(`AppSplitButton`,D),e(`AppSplitButton`,`size`,v,c),e(`AppSplitButton`,`type`,g,l);let O=[`btn`,i(_),d[v]??``,`wui-split-toggle`].filter(Boolean).join(` `),k=o(n,{name:`chevron-down`,size:u[v]??u.md}),A=y||b;return s(`div`,{role:`group`,"aria-label":f,className:[`wui-split-button`,E].filter(Boolean).join(` `),...D,children:[o(r,{variant:_,size:v,type:g,href:h,onClick:m,disabled:y,loading:b,leftIcon:x,shortcut:S,children:f}),A?o(`div`,{className:`wui-split-menu`,children:o(`button`,{type:`button`,className:O,disabled:!0,"aria-label":C,children:k})}):o(a,{className:`wui-split-menu`,trigger:k,toggleClassName:O,label:C,ariaLabel:C,align:w,items:p,linkComponent:T})]})}export{f as default};

package/dist/components/AppTimeline.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`feed`,`progress`],o=[`vertical`,`horizontal`],s=[`neutral`,`success`,`warning`,`danger`,`info`],c={done:`check`,current:`clock`,"on-hold":`lock`,rejected:`x`,cancelled:`minus`,skipped:`arrow-right`,upcoming:null},l=e=>typeof e==`string`&&(/^https?:[/][/]/i.test(e)||e.startsWith(`/`)&&e[1]!==`/`&&e[1]!==`\\`)&&![...e].some(e=>e.charCodeAt(0)<=32||e.charCodeAt(0)===127);function u(e){if(!(e.byHref==null||e.byHref===``)){if(!l(e.byHref))throw Error(`<AppTimeline> items[].byHref must be a path starting with one '/', or an http:// or https:// address, with no spaces.`);if(!e.by)throw Error(`<AppTimeline> items[].byHref links the by name, so the item needs by.`)}}var d=e=>e.byHref?r(`a`,{className:`timeline-by-link`,href:e.byHref,children:e.by}):e.by;function f({items:l=[],variant:f=`feed`,orientation:p=`vertical`,size:m,className:h=``,style:g,..._}){t(`AppTimeline`,_),e(`AppTimeline`,`variant`,f,a),e(`AppTimeline`,`orientation`,p,o);for(let t of l)e(`AppTimeline`,`items[].tone`,t.tone,s),u(t),f===`progress`&&e(`AppTimeline`,`items[].status`,t.status,Object.keys(c));let v=f===`progress`,y=`timeline${v?` timeline--progress`:``}${p===`horizontal`?` timeline--horizontal`:``}${h?` ${h}`:``}`,b=typeof m==`number`&&m>0?m:void 0,x=b?Math.round(b*.54):v?13:12;return r(`ol`,{className:y,style:b?{...g,"--wui-timeline-dot":`${b}px`}:g,..._,children:l.map((e,t)=>{let a=v?e.status:void 0,o=a?` is-${a}`:``,s=e.tone&&e.tone!==`neutral`?` ${e.tone}`:``,l=v?e.icon??(a?c[a]:void 0):e.icon||`circle`;return i(`li`,{className:`timeline-item${o}${s}`,children:[r(`span`,{className:`timeline-dot`,children:l?r(n,{name:l,size:x}):null}),i(`div`,{className:`timeline-body`,children:[v?i(`div`,{className:`timeline-head`,children:[r(`div`,{className:`timeline-title`,children:e.title}),(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]})]}):r(`div`,{className:`timeline-title`,children:e.title}),e.description&&r(`div`,{className:`timeline-desc`,children:e.description}),!v&&(e.at||e.time||e.by)&&i(`div`,{className:`timeline-meta`,children:[(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]}),e.by&&r(`span`,{className:`timeline-by`,children:d(e)})]}),v&&e.by&&r(`div`,{className:`timeline-meta`,children:r(`span`,{className:`timeline-by`,children:d(e)})}),e.note&&r(`p`,{className:`timeline-note`,children:e.note})]})]},e.key??`${e.at}-${t}`)})})}export{f as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`feed`,`progress`,`steps`],o=[`vertical`,`horizontal`],s=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],c=[`neutral`,`success`,`warning`,`danger`,`info`],l=[`sm`,`md`,`lg`],u={done:`check`,current:`clock`,"on-hold":`lock`,rejected:`x`,cancelled:`minus`,skipped:`arrow-right`,upcoming:null},d=e=>typeof e==`string`&&(/^https?:[/][/]/i.test(e)||e.startsWith(`/`)&&e[1]!==`/`&&e[1]!==`\\`)&&![...e].some(e=>e.charCodeAt(0)<=32||e.charCodeAt(0)===127);function f(e){if(!(e.byHref==null||e.byHref===``)){if(!d(e.byHref))throw Error(`<AppTimeline> items[].byHref must be a path starting with one '/', or an http:// or https:// address, with no spaces.`);if(!e.by)throw Error(`<AppTimeline> items[].byHref links the by name, so the item needs by.`)}}var p=e=>e.byHref?r(`a`,{className:`timeline-by-link`,href:e.byHref,children:e.by}):e.by;function m({items:d=[],variant:m=`feed`,orientation:h,iconVariant:g,size:_,className:v=``,style:y,...b}){t(`AppTimeline`,b),e(`AppTimeline`,`variant`,m,a),e(`AppTimeline`,`orientation`,h,o),e(`AppTimeline`,`iconVariant`,g,s),e(`AppTimeline`,`size`,typeof _==`string`?_:null,l);for(let t of d)e(`AppTimeline`,`items[].tone`,t.tone,c),f(t),m===`progress`&&e(`AppTimeline`,`items[].status`,t.status,Object.keys(u));let x=m===`progress`,S=m===`steps`,C=h===`horizontal`,w=g??(S?`bulk`:void 0),T=typeof _==`string`&&l.includes(_)?_:`md`,E=typeof _==`number`&&_>0?_:void 0,D=!E&&T!==`md`?` wui-timeline--${T}`:``,O=`${S?`timeline wui-timeline--steps${h===`vertical`?` wui-timeline--steps-vertical`:``}`:`timeline${x?` timeline--progress`:``}${C?` timeline--horizontal`:``}`}${D}${v?` ${v}`:``}`,k=S?E?Math.round(E*.43):{sm:19,md:24,lg:31}[T]:E?Math.round(E*.54):x?{sm:10,md:13,lg:17}[T]:{sm:10,md:12,lg:17}[T];return r(`ol`,{className:O,style:E?{...y,"--wui-timeline-dot":`${E}px`}:y,...b,children:d.map((e,t)=>{let a=e.tone&&e.tone!==`neutral`?` ${e.tone}`:``;if(S){let o=e.eyebrow??`Step ${t+1}`;return i(`li`,{className:`timeline-item${a}`,children:[r(`span`,{className:`timeline-dot`,children:e.icon?r(n,{name:e.icon,size:k,variant:w}):null}),i(`div`,{className:`timeline-body`,children:[o!==``&&r(`div`,{className:`wui-timeline-eyebrow`,children:o}),r(`div`,{className:`timeline-title`,children:e.title}),e.description&&r(`div`,{className:`timeline-desc`,children:e.description})]})]},e.key??`${e.at}-${t}`)}let o=x?e.status:void 0,s=o?` is-${o}`:``,c=x?e.icon??(o?u[o]:void 0):e.icon||`circle`;return i(`li`,{className:`timeline-item${s}${a}`,children:[r(`span`,{className:`timeline-dot`,children:c?r(n,{name:c,size:k,variant:w}):null}),i(`div`,{className:`timeline-body`,children:[x?i(`div`,{className:`timeline-head`,children:[r(`div`,{className:`timeline-title`,children:e.title}),(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]})]}):r(`div`,{className:`timeline-title`,children:e.title}),e.description&&r(`div`,{className:`timeline-desc`,children:e.description}),!x&&(e.at||e.time||e.by)&&i(`div`,{className:`timeline-meta`,children:[(e.at||e.time)&&i(`span`,{className:`timeline-when`,children:[e.at&&r(`span`,{className:`timeline-at`,title:e.atTitle||void 0,children:e.at}),e.time&&r(`span`,{className:`timeline-time`,children:e.time})]}),e.by&&r(`span`,{className:`timeline-by`,children:p(e)})]}),x&&e.by&&r(`div`,{className:`timeline-meta`,children:r(`span`,{className:`timeline-by`,children:p(e)})}),e.note&&r(`p`,{className:`timeline-note`,children:e.note})]})]},e.key??`${e.at}-${t}`)})})}export{m as default};

package/dist/components/warnDeprecatedValue.js

@@ -0,0 +1 @@
+import{devWarn as e}from"../lib/devWarn.js";var t=()=>{try{return process.env.NODE_ENV!==`production`}catch{return!0}},n=new Set;function r(r,i,a,o){if(!t()||a==null||!Object.hasOwn(o,a))return;let s=`${r}.${i}.${String(a)}`;if(n.has(s))return;n.add(s);let{use:c,removeIn:l}=o[a];e(`[@webority/ui-react] <${r}> ${i}="${String(a)}" is deprecated and is removed in ${l}. Use ${i}="${c}".`)}export{r as default};

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

@@ -1,3 +1,4 @@
+export declare function buttonVariantClass(variant: any): string;
 export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, shortcut, animation, pinRightIcon, shape, iconVariant, className, ...rest }: {
     [x: string]: any;
     animation: any;

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

@@ -20,6 +20,7 @@
  * @param {number} [props.checkSize=18]
  * @param {boolean} [props.hideCheck=false] Render no selected tick. Selection then reads from the
  *   card's border and fill alone, and the card sheds the top/bottom room the tick needed.
+ * @param {boolean} [props.disabled=false] The card cannot change: no pointer, no hover, announced as disabled. A disabled parent fieldset does the same.
  * @param {'sm'|'md'|'lg'} [props.size='md'] Card size: padding, gap, icon disc, type and the
  *   tick offset step together.
  * @param {'inline'|'stacked'} [props.layout='inline'] `inline` puts the icon beside the text;
@@ -29,7 +30,7 @@
 export default function AppChoiceCard({ name, multiple, value, checked, onChange, icon, iconNode, // custom icon element; overrides the `icon` name when provided
 iconSize, image, // image URL — renders an image-forward card (overrides icon)
 imageAlt, children, // custom body template — overrides title/description when provided
-title, description, checkIcon, checkSize, hideCheck, size, layout, className, ...rest }: {
+title, description, checkIcon, checkSize, hideCheck, disabled, size, layout, className, ...rest }: {
     name: string;
     multiple?: boolean;
     value: string;
@@ -46,6 +47,7 @@ title, description, checkIcon, checkSize, hideCheck, size, layout, className, ..
     checkIcon?: string;
     checkSize?: number;
     hideCheck?: boolean;
+    disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     layout?: 'inline' | 'stacked';
     className?: string;

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

@@ -31,7 +31,7 @@ import "@webority/ui-elements/elements/consent-banner";
  * @param {string} [props.functionalDescription] What the functional category covers.
  * @param {string} [props.marketingDescription] What the marketing category covers.
  * @param {Array<"analytics"|"functional"|"marketing">} [props.categories=['analytics','functional','marketing']] The optional categories to show. Essential always shows. A category left out has no row, saves as off and is never granted by Accept all.
- * @param {"bottom-left"|"bottom-right"} [props.position='bottom-left'] Which corner it pins to.
+ * @param {"bottom-left"|"bottom-right"|"bar"} [props.position='bottom-left'] The corner it pins to, or the full-width bar. bar is a slim full-width bar along the bottom at every width.
  * @param {boolean} [props.standalone=false] Render sealed in a shadow root with bundled styles, for a page that does not load `@webority/theme`.
  * @param {string} [props.className] Extra classes on the element.
  * @param {import('react').CSSProperties} [props.style] Inline style; lands on the element with `className`.
@@ -45,7 +45,7 @@ export default function AppConsentBanner({ heading, description, policyHref, pol
     functionalDescription?: string;
     marketingDescription?: string;
     categories?: Array<"analytics" | "functional" | "marketing">;
-    position?: "bottom-left" | "bottom-right";
+    position?: "bottom-left" | "bottom-right" | "bar";
     standalone?: boolean;
     className?: string;
     style?: import('react').CSSProperties;

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

@@ -13,7 +13,7 @@
  * @param {() => void} [props.onClick] Called when the main button is pressed.
  * @param {string} [props.href] Make the main button a link.
  * @param {'button'|'submit'|'reset'} [props.type='button'] The main button's type.
- * @param {'primary'|'secondary'|'outline'|'ghost'|'danger'|'success'|'secondary-danger'|'outline-danger'|'light'|'warning'|'subtle'|'outline-light'|'outline-secondary'} [props.variant='primary'] Both halves share it.
+ * @param {'primary'|'secondary'|'outline'|'ghost'|'danger'|'success'|'secondary-danger'|'outline-danger'|'light'|'warning'|'neutral'|'outline-light'|'outline-secondary'|'text'|'subtle'} [props.variant='primary'] Both halves share it. subtle is deprecated (use neutral) and is removed in 0.79.0.
  * @param {'sm'|'md'|'lg'} [props.size='md']
  * @param {boolean} [props.disabled=false] Disables both halves.
  * @param {boolean} [props.loading=false] Shows the spinner on the main button and disables both halves.
@@ -40,7 +40,7 @@ export default function AppSplitButton({ label, items, onClick, href, type, vari
     onClick?: () => void;
     href?: string;
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'secondary-danger' | 'outline-danger' | 'light' | 'warning' | 'subtle' | 'outline-light' | 'outline-secondary';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'secondary-danger' | 'outline-danger' | 'light' | 'warning' | 'neutral' | 'outline-light' | 'outline-secondary' | 'text' | 'subtle';
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     loading?: boolean;

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

@@ -1,5 +1,5 @@
 /**
- * A chronological activity feed OR a status-progress tracker.
+ * A chronological activity feed, a status-progress tracker, or a numbered process.
  *
  * - `variant="feed"` (default) — an audit trail / sign-off history / status log.
  *   Each entry is a toned dot on a continuous vertical rail, with a title, a
@@ -10,39 +10,43 @@
  *   or a hollow ring (upcoming); the rail is drawn per segment so the path
  *   between two completed steps reads as filled. The timestamp is pinned to the
  *   top-right of the step.
+ * - `variant="steps"` — a numbered process: large tinted icon discs joined by a dashed line, each with an eyebrow, title and description. A row from md up, a column on phones.
  *
  * The rail is drawn so it cannot break into disconnected segments when an entry
  * wraps to two lines — the failure that makes most hand-rolled timelines look
  * broken with real data.
  *
  * @param {object} props
- * @param {{ key?: string, icon?: string,
+ * @param {{ key?: string, icon?: string, eyebrow?: import('react').ReactNode,
  *   tone?: 'neutral'|'success'|'warning'|'danger'|'info',
  *   status?: 'upcoming'|'current'|'done'|'on-hold'|'rejected'|'cancelled'|'skipped',
  *   title: import('react').ReactNode, description?: import('react').ReactNode,
  *   at?: string, atTitle?: string, time?: string, by?: string, byHref?: string, note?: string }[]} props.items
- *   Feed variant: newest first. Progress variant: first stage first.
+ *   Feed variant: newest first. Progress variant: first stage first. Steps variant: first step first.
  *   `status` drives the dot + rail in the progress variant; `description` is a
  *   plain inline subtext under the title (distinct from the boxed `note`).
+ *   Steps variant: the label above the title; omitted it reads `Step 1`, `Step 2`…, an empty string hides it.
  *   `at` is the date and `time` an optional time-of-day shown beside it — both are
  *   pre-formatted strings the caller owns (IST, DD-MMM-YYYY / HH:mm); pass either or both.
  *   `atTitle` is the full date and time shown on hover over `at`, such as `14 Oct 2026, 4:05 pm`; omit it for no tooltip.
  *   `byHref` links the `by` name (a path starting with one `/`, or an `http://` / `https://` address);
  *   any other value, or `byHref` without `by`, throws.
- * @param {'feed'|'progress'} [props.variant] Layout mode. Defaults to `feed`.
- * @param {'vertical'|'horizontal'} [props.orientation] Rail direction — vertical (default) stacks
- *   items top-to-bottom; horizontal lays dots in a row with the body beneath each. Orthogonal to
- *   `variant`, so both feed and progress can run horizontally.
- * @param {number} [props.size] Dot diameter in px (default 24). The rail, halo
- *   and glyph scale from it, so the whole timeline grows/shrinks in proportion.
+ * @param {'feed'|'progress'|'steps'} [props.variant] Layout mode. Defaults to `feed`.
+ *   `steps`: a numbered process: large tinted icon discs joined by a dashed line, each with an eyebrow, title and description. A row from md up, a column on phones.
+ * @param {'vertical'|'horizontal'} [props.orientation] Feed and progress: vertical (default) or horizontal.
+ *   Steps: a row from md up and a column below; `vertical` keeps the column at every width.
+ *   Horizontal lays dots in a row with the body beneath each. Orthogonal to `variant` for feed and progress.
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant] The iconsax style of the dot icons. Defaults to bulk for steps and linear otherwise.
+ * @param {'sm'|'md'|'lg'|number} [props.size] A preset, or the dot diameter in px. sm, md (default) and lg set the dot (feed and progress 18, 24 and 32px; steps 44, 56 and 72px) and scale the text and spacing to match. A px number sets only the dot, and the glyph follows it.
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style] Inline style on the list;
  *   the `size` var is merged into it.
  */
-export default function AppTimeline({ items, variant, orientation, size, className, style, ...rest }: {
+export default function AppTimeline({ items, variant, orientation, iconVariant, size, className, style, ...rest }: {
     items: {
         key?: string;
         icon?: string;
+        eyebrow?: import('react').ReactNode;
         tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
         status?: 'upcoming' | 'current' | 'done' | 'on-hold' | 'rejected' | 'cancelled' | 'skipped';
         title: import('react').ReactNode;
@@ -54,9 +58,10 @@ export default function AppTimeline({ items, variant, orientation, size, classNa
         byHref?: string;
         note?: string;
     }[];
-    variant?: 'feed' | 'progress';
+    variant?: 'feed' | 'progress' | 'steps';
     orientation?: 'vertical' | 'horizontal';
-    size?: number;
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    size?: 'sm' | 'md' | 'lg' | number;
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+/**
+ * @param {string} component
+ * @param {string} prop
+ * @param {unknown} value the value the caller passed
+ * @param {Record<string, { use: string, removeIn: string }>} deprecated
+ */
+export default function warnDeprecatedValue(component: string, prop: string, value: unknown, deprecated: Record<string, {
+    use: string;
+    removeIn: string;
+}>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.77.2",
+  "version": "0.78.1",
   "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.77.2",
-    "@webority/ui-elements": "0.77.2"
+    "@webority/theme": "0.78.1",
+    "@webority/ui-elements": "0.78.1"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",