@webority/ui-react 0.98.0 → 0.100.0

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.98.0"
+    "version": "0.100.0"
   },
   "rendererProtocolVersion": 7,
   "platform": "Web",
@@ -2045,6 +2045,12 @@
           "required": false,
           "description": "Emphasis level.",
           "default": "primary"
+        },
+        {
+          "name": "vibrate",
+          "type": "any",
+          "required": false,
+          "description": "Phones only: true buzzes 10 ms on a tap, or a whole number of milliseconds from 1 to 100. Not applied while disabled or loading; ignored where the browser has no vibration."
         }
       ],
       "itemsTakeAction": [],
@@ -9783,6 +9789,13 @@
           "required": false,
           "description": "The form field name."
         },
+        {
+          "name": "optional",
+          "type": "boolean",
+          "required": false,
+          "description": "Ends the label with (optional) when the field is not required. Required wins when both are set.",
+          "default": false
+        },
         {
           "name": "passwordPolicy",
           "type": "object",
@@ -19174,6 +19187,67 @@
         ]
       }
     },
+    {
+      "name": "AppSkeletonLines",
+      "marker": "AppSkeletonLines",
+      "acceptsChildren": false,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra class names added to the wrapper.",
+          "default": ""
+        },
+        {
+          "name": "lastLineWidth",
+          "type": "string",
+          "required": false,
+          "description": "Width of the last line as a CSS length string, such as 60% or 12rem. The other lines are full width.",
+          "default": "60%"
+        },
+        {
+          "name": "lines",
+          "type": "number",
+          "required": false,
+          "description": "How many lines to draw, an integer from 1 to 12. Any other value renders the default and warns.",
+          "default": 3
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "usage": {
+        "when": [
+          "A paragraph of text is loading and the page should hold its shape.",
+          "A card or a description is waiting for its first data."
+        ],
+        "whenNot": [
+          {
+            "text": "A single bar stands in for one element, such as a heading or a value.",
+            "instead": "AppSkeleton"
+          },
+          {
+            "text": "A table is loading its first page.",
+            "instead": "AppSkeletonRows"
+          },
+          {
+            "text": "The data loaded but the result set is empty.",
+            "instead": "AppEmptyState"
+          },
+          {
+            "text": "The whole page is blocked on a single request.",
+            "instead": "a page-level spinner"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The wrapper is aria-hidden, so screen readers skip the placeholder lines.",
+          "The lines have no role and take no focus."
+        ]
+      }
+    },
     {
       "name": "AppSkeletonRows",
       "marker": null,
@@ -22257,6 +22331,13 @@
           "required": false,
           "description": "The field name the text posts under."
         },
+        {
+          "name": "optional",
+          "type": "boolean",
+          "required": false,
+          "description": "Ends the label with (optional) when the field is not required. Required wins when both are set.",
+          "default": false
+        },
         {
           "name": "placeholder",
           "type": "string",
@@ -24665,7 +24746,6 @@
       "card",
       "drawer",
       "modal",
-      "overlay",
       "popover"
     ],
     "font": [
@@ -24761,7 +24841,7 @@
       "primary": "Primary fill for buttons, selected states and borders.",
       "primary-hover": "Primary fill while a control is hovered or pressed.",
       "primary-soft": "Soft primary tint behind selected and highlighted rows.",
-      "primary-text": "Primary as text and small glyphs on a page, passing AA contrast.",
+      "primary-text": "Primary as text and small glyphs on a page.",
       "primary-wash": "Faint translucent primary wash over a surface.",
       "primary-wash-strong": "Stronger translucent primary wash over a surface.",
       "progress-label": "Label text inside a progress bar fill.",
@@ -25251,13 +25331,6 @@
         "color": "rgba(7, 20, 55, 0.28)",
         "elevation": 12
       },
-      "overlay": {
-        "x": 0,
-        "y": 24,
-        "blur": 60,
-        "spread": -16,
-        "color": "rgba(7, 20, 55, 0.28)"
-      },
       "popover": {
         "x": 0,
         "y": 8,

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.98.0",
+  "version": "0.100.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 7,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.98.0"
+    "version": "0.100.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "81dfb6ae016a3b300cdbe191bc9ecf1ccaf850241f3ed4a34692455ecbb88352",
-      "bytes": 841354
+      "sha256": "cabf45aeafb33cbf781c41577631fe816445103148b4f1be0388684cb02100ea",
+      "bytes": 843941
     },
     "kit.js": {
-      "sha256": "ab0348c98456a2f2a6e520facdc9bf560fbbe423f98a976da56011c29c611ad2",
-      "bytes": 10859669
+      "sha256": "b76e8f678745673c055adb08c7c64d8c1f088a3f329260bcf9c901fb3f4de710",
+      "bytes": 10863245
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppButton.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{shortcutAria as r,shortcutChip as i}from"../lib/shortcutChip.js";import a from"./withTooltip.js";import o from"./AppIcon.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`};function d(e){return`btn-${u[e]??`primary`}`}var f={sm:14,md:16,lg:20},p=[`sheen`,`fill`,`expand`,`glow`,`roll`,`none`],m=[`rounded`,`pill`,`sharp`],h=[`button`,`submit`,`reset`],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(o,{name:e,size:f[t]??f.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(o,{name:e,size:f[n]??f.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(o,{name:e,size:f[t]??f.md,variant:n}):e}):null}function S(o){let{children:d,variant:S=`primary`,size:C=`md`,type:w=`button`,loading:T=!1,disabled:E=!1,block:D=!1,leftIcon:O=null,rightIcon:k=null,href:A,static:j=!1,tooltip:M,tooltipPlacement:N,shortcut:P,animation:F,pinRightIcon:I=!1,shape:L=`rounded`,iconVariant:R,className:z=``,...B}=o;n(`AppButton`,B),F!==void 0&&t(`AppButton`,`animation`,F,p);let V=F===`roll`&&!j,H=I&&k!=null&&k!==``&&!j&&!T;if(t(`AppButton`,`variant`,S,Object.keys(u)),t(`AppButton`,`size`,C,Object.keys(f)),t(`AppButton`,`shape`,L,m),t(`AppButton`,`type`,w,h),R!==void 0&&t(`AppButton`,`iconVariant`,R,g),j){let t=[`btn`,`btn-${u[S]??`primary`}`,C===`sm`?`btn-sm`:C===`lg`?`btn-lg`:``,D?`w-100`:``,_(L),`btn-static`,z].filter(Boolean).join(` `),{onClick:n,...r}=B;return a(l(`span`,{className:t,...e(`AppButton`,o),...r,children:[b(O,`left`,C,R),d,b(k,`right`,C,R)]}),M,N)}let U=[D?`w-100`:``,T?`is-loading`:``,F&&p.includes(F)?`btn-anim-${F}`:``,H?`wui-btn-pin-end`:``,_(L),z].filter(Boolean).join(` `),W=(B.as===void 0||B.as===`button`)&&A===void 0&&B.to===void 0,G=W?{}:{role:void 0,tabIndex:E||T?-1:void 0},K=M!=null&&M!==``;return a(l(s,{type:W?w:void 0,href:A,variant:u[S]??`primary`,size:C===`md`?void 0:C,disabled:E||T,"aria-busy":T||void 0,"aria-keyshortcuts":r(P),className:U||void 0,...G,...e(`AppButton`,o),...B,children:[T&&c(`span`,{className:`spinner-border spinner-border-sm me-2`,"aria-hidden":`true`}),!T&&b(O,`left`,C,R),V?v(d):d,!T&&(V?y(k,C,H,R):H?x(k,C,R):b(k,`right`,C,R)),!K&&i(P)]}),M,N,P)}export{d as buttonVariantClass,S as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{shortcutAria as r,shortcutChip as i}from"../lib/shortcutChip.js";import a from"./withTooltip.js";import o from"./AppIcon.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`};function d(e){return`btn-${u[e]??`primary`}`}var f={sm:14,md:16,lg:20},p=[`sheen`,`fill`,`expand`,`glow`,`roll`,`none`],m=[`rounded`,`pill`,`sharp`],h=[`button`,`submit`,`reset`],g=new Set([!0,!1,...Array.from({length:100},(e,t)=>t+1)]),_=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],v=e=>e===`pill`||e===`sharp`?`wui-btn-shape-${e}`:``;function y(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 b(e,t,n,r){if(!e)return null;let i=n=>typeof e==`string`?c(o,{name:e,size:f[t]??f.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 x(e,t,n,r){if(!e)return null;let i=t===`left`?`me-2`:`ms-2`;return typeof e==`string`?c(o,{name:e,size:f[n]??f.md,variant:r,className:i}):c(`span`,{className:`d-inline-flex ${i}`,children:e})}function S(e,t,n){return e?c(`span`,{className:`wui-btn-pin-icon`,"aria-hidden":`true`,children:typeof e==`string`?c(o,{name:e,size:f[t]??f.md,variant:n}):e}):null}function C(o){let{children:d,variant:C=`primary`,size:w=`md`,type:T=`button`,loading:E=!1,disabled:D=!1,block:O=!1,leftIcon:k=null,rightIcon:A=null,href:j,static:M=!1,tooltip:N,tooltipPlacement:P,shortcut:F,animation:I,pinRightIcon:L=!1,shape:R=`rounded`,iconVariant:z,className:B=``,onClick:V,vibrate:H,...U}=o;n(`AppButton`,U),t(`AppButton`,`vibrate`,H,g);let W=H===!0?10:Number.isInteger(H)&&H>=1&&H<=100?H:0;I!==void 0&&t(`AppButton`,`animation`,I,p);let G=I===`roll`&&!M,K=L&&A!=null&&A!==``&&!M&&!E;if(t(`AppButton`,`variant`,C,Object.keys(u)),t(`AppButton`,`size`,w,Object.keys(f)),t(`AppButton`,`shape`,R,m),t(`AppButton`,`type`,T,h),z!==void 0&&t(`AppButton`,`iconVariant`,z,_),M)return a(l(`span`,{className:[`btn`,`btn-${u[C]??`primary`}`,w===`sm`?`btn-sm`:w===`lg`?`btn-lg`:``,O?`w-100`:``,v(R),`btn-static`,B].filter(Boolean).join(` `),...e(`AppButton`,o),...U,children:[x(k,`left`,w,z),d,x(A,`right`,w,z)]}),N,P);let q=[O?`w-100`:``,E?`is-loading`:``,I&&p.includes(I)?`btn-anim-${I}`:``,K?`wui-btn-pin-end`:``,v(R),B].filter(Boolean).join(` `),J=(U.as===void 0||U.as===`button`)&&j===void 0&&U.to===void 0,Y=J?{}:{role:void 0,tabIndex:D||E?-1:void 0},X=N!=null&&N!==``,Z=W?e=>{!D&&!E&&navigator.vibrate?.(W),V?.(e)}:V;return a(l(s,{type:J?T:void 0,href:j,variant:u[C]??`primary`,size:w===`md`?void 0:w,disabled:D||E,"aria-busy":E||void 0,"aria-keyshortcuts":r(F),"data-wui-vibrate":W||void 0,className:q||void 0,onClick:Z,...Y,...e(`AppButton`,o),...U,children:[E&&c(`span`,{className:`spinner-border spinner-border-sm me-2`,"aria-hidden":`true`}),!E&&x(k,`left`,w,z),G?y(d):d,!E&&(G?b(A,w,K,z):K?S(A,w,z):x(A,`right`,w,z)),!X&&i(F)]}),N,P,F)}export{d as buttonVariantClass,C as default};

package/dist/components/AppIcon.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import{FULL_LINEAR_LOADERS as n,FULL_VARIANT_LOADERS as r,shardKey as i}from"./iconCatalogLoaders.g.js";import{ICON_NAMES as a}from"./iconCatalogNames.g.js";import{GLYPHS as o}from"./iconGlyphs.g.js";import s from"./warnInvalidValue.js";import c from"./warnUnknownProps.js";import l from"./withTooltip.js";import{useEffect as u,useState as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],h=new Set;function g(e,n){h.has(e)||(h.add(e),t(`[@webority/ui-react] The ${e} failed to load (${n?.message??n}); icons fall back to the linear default until a later render retries it.`))}var _=null,v=null,y=!1,b=new Set;function x(){return v||=import(`./iconVariants.g.js`).then(e=>{_=e.VARIANT_GLYPHS,y=!1;for(let e of b)e();b.clear()}).catch(e=>{v=null,g(`curated icon variants chunk`,e),y?b.clear():(y=!0,setTimeout(()=>{for(let e of[...b])e()},1e3))}),v}var S=new Set(a),C=Object.create(null),w=Object.create(null),T=Object.create(null),E=Object.create(null);function D(e){let t=i(e),r=n[t];return r?(w[t]||=r().then(e=>{Object.assign(C,e.FULL_GLYPHS),E[t]=!1;let n=T[t];if(n){for(let e of n)e();n.clear()}}).catch(e=>{w[t]=null,g(`full icon catalogue '${t}' shard`,e),E[t]?T[t]?.clear():(E[t]=!0,setTimeout(()=>{for(let e of[...T[t]||[]])e()},1e3))}),w[t]):null}var O=Object.create(null),k=Object.create(null),A=Object.create(null),j=Object.create(null);function M(e,t){let n=r[e];if(!n)return null;let a=i(t),o=n[a];if(!o)return null;let s=`${e}:${a}`;return k[s]||=o().then(t=>{let n=O[e]||(O[e]=Object.create(null));Object.assign(n,t.FULL_VARIANT_GLYPHS),j[s]=!1;let r=A[s];if(r){for(let e of r)e();r.clear()}}).catch(t=>{k[s]=null,g(`${e} icon catalogue '${a}' shard`,t),j[s]?A[s]?.clear():(j[s]=!0,setTimeout(()=>{for(let e of[...A[s]||[]])e()},1e3))}),k[s]}var N=a,P=new Map;function F(e){for(let[t,n]of Object.entries(e))P.set(t,n)}function I(t){let{name:n,size:r=16,variant:a,tooltip:h,tooltipPlacement:g,className:v,color:y,style:w,"data-canvas":E,...k}=t;c(`AppIcon`,k),s(`AppIcon`,`variant`,a,m);let j=!!a&&a!==`linear`,N=h!=null&&h!==``,F=e(`AppIcon`,t),I=(e,t=!0)=>N?l(f(`span`,{className:`wui-icon-tip`,role:`img`,"aria-label":h,...t?F:void 0,children:e}),h,g):e,L=o[n]!==void 0,R=!L&&S.has(n),[,z]=d(0);u(()=>{let e=()=>z(e=>e+1);j&&L&&!_&&(b.add(e),x());let t=R?i(n):null;R&&C[n]===void 0&&((T[t]||=new Set).add(e),D(n));let r=j&&R?`${a}:${i(n)}`:null;return j&&R&&O[a]?.[n]===void 0&&((A[r]||=new Set).add(e),M(a,n)),()=>{b.delete(e),t&&T[t]?.delete(e),r&&A[r]?.delete(e)}},[n,j,L,R,a]);let B=P.get(n);if(B)return I(B({size:r,color:y,className:v,style:w}),!1);if(n===`hard-hat`)return I(f(`svg`,{width:r,height:r,viewBox:`0 0 24 24`,fill:`none`,className:v?`wui-icon ${v}`:`wui-icon`,"data-icon":n,"aria-hidden":`true`,style:{color:y,...w},...N?void 0:F,...k,children:p(`g`,{fill:`currentColor`,children:[f(`circle`,{cx:`12`,cy:`7.5`,r:`4.2`}),f(`path`,{d:`M3.2 22.5C3.2 17.4 7.5 14.9 11 14.7L12 17.4l1-2.7C16.5 14.9 20.8 17.4 20.8 22.5z`})]})}));let V=j&&(_?.[a]?.[n]||R&&O?.[a]?.[n])||o[n]||C[n];return V?I(f(`svg`,{width:r,height:r,viewBox:`0 0 24 24`,fill:`none`,className:v?`wui-icon ${v}`:`wui-icon`,"data-icon":n,"aria-hidden":`true`,style:{color:y,...w},dangerouslySetInnerHTML:{__html:V},...N?void 0:F,...k})):null}export{I as default,N as iconNames,F as registerIcons};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import{FULL_LINEAR_LOADERS as n,FULL_VARIANT_LOADERS as r,shardKey as i}from"./iconCatalogLoaders.g.js";import{ICON_NAMES as a}from"./iconCatalogNames.g.js";import{GLYPHS as o}from"./iconGlyphs.g.js";import s from"./warnInvalidValue.js";import c from"./warnUnknownProps.js";import l from"./withTooltip.js";import{useEffect as u,useState as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],h=new Set;function g(e,n){h.has(e)||(h.add(e),t(`[@webority/ui-react] The ${e} failed to load (${n?.message??n}); icons fall back to the linear default until a later render retries it.`))}var _=null,v=null,y=!1,b=new Set;function x(){return v||=import(`./iconVariants.g.js`).then(e=>{_=e.VARIANT_GLYPHS,y=!1;for(let e of b)e();b.clear()}).catch(e=>{v=null,g(`curated icon variants chunk`,e),y?b.clear():(y=!0,setTimeout(()=>{for(let e of[...b])e()},1e3))}),v}var S=new Set(a),C=Object.create(null),w=Object.create(null),T=Object.create(null),E=Object.create(null);function D(e){let t=i(e),r=n[t];return r?(w[t]||=r().then(e=>{Object.assign(C,e.FULL_GLYPHS),E[t]=!1;let n=T[t];if(n){for(let e of n)e();n.clear()}}).catch(e=>{w[t]=null,g(`full icon catalogue '${t}' shard`,e),E[t]?T[t]?.clear():(E[t]=!0,setTimeout(()=>{for(let e of[...T[t]||[]])e()},1e3))}),w[t]):null}var O=Object.create(null),k=Object.create(null),A=Object.create(null),j=Object.create(null);function M(e,t){let n=r[e];if(!n)return null;let a=i(t),o=n[a];if(!o)return null;let s=`${e}:${a}`;return k[s]||=o().then(t=>{O[e]||(O[e]=Object.create(null)),Object.assign(O[e],t.FULL_VARIANT_GLYPHS),j[s]=!1;let n=A[s];if(n){for(let e of n)e();n.clear()}}).catch(t=>{k[s]=null,g(`${e} icon catalogue '${a}' shard`,t),j[s]?A[s]?.clear():(j[s]=!0,setTimeout(()=>{for(let e of[...A[s]||[]])e()},1e3))}),k[s]}var N=a,P=new Map;function F(e){for(let[t,n]of Object.entries(e))P.set(t,n)}function I(t){let{name:n,size:r=16,variant:a,tooltip:h,tooltipPlacement:g,className:v,color:y,style:w,"data-canvas":E,...k}=t;c(`AppIcon`,k),s(`AppIcon`,`variant`,a,m);let j=!!a&&a!==`linear`,N=h!=null&&h!==``,F=e(`AppIcon`,t),I=(e,t=!0)=>N?l(f(`span`,{className:`wui-icon-tip`,role:`img`,"aria-label":h,...t?F:void 0,children:e}),h,g):e,L=o[n]!==void 0,R=!L&&S.has(n),[,z]=d(0);u(()=>{let e=()=>z(e=>e+1);j&&L&&!_&&(b.add(e),x());let t=R?i(n):null;R&&C[n]===void 0&&(T[t]||=new Set,T[t].add(e),D(n));let r=j&&R?`${a}:${i(n)}`:null;return j&&R&&O[a]?.[n]===void 0&&(A[r]||=new Set,A[r].add(e),M(a,n)),()=>{b.delete(e),t&&T[t]?.delete(e),r&&A[r]?.delete(e)}},[n,j,L,R,a]);let B=P.get(n);if(B)return I(B({size:r,color:y,className:v,style:w}),!1);if(n===`hard-hat`)return I(f(`svg`,{width:r,height:r,viewBox:`0 0 24 24`,fill:`none`,className:v?`wui-icon ${v}`:`wui-icon`,"data-icon":n,"aria-hidden":`true`,style:{color:y,...w},...N?void 0:F,...k,children:p(`g`,{fill:`currentColor`,children:[f(`circle`,{cx:`12`,cy:`7.5`,r:`4.2`}),f(`path`,{d:`M3.2 22.5C3.2 17.4 7.5 14.9 11 14.7L12 17.4l1-2.7C16.5 14.9 20.8 17.4 20.8 22.5z`})]})}));let V=j&&(_?.[a]?.[n]||R&&O?.[a]?.[n])||o[n]||C[n];return V?I(f(`svg`,{width:r,height:r,viewBox:`0 0 24 24`,fill:`none`,className:v?`wui-icon ${v}`:`wui-icon`,"data-icon":n,"aria-hidden":`true`,style:{color:y,...w},dangerouslySetInnerHTML:{__html:V},...N?void 0:F,...k})):null}export{I as default,N as iconNames,F as registerIcons};

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

package/dist/components/AppKanban.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{errorToast as i}from"./toast.js";import{formatValue as a}from"@webority/ui-elements/helpers";import{useEffect as o,useId as s,useMemo as c,useRef as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{KANBAN_SUMMARY_FORMATS as p,KANBAN_TEXT as m,KANBAN_TONES as h,kanbanOverflow as g,kanbanSummaryFormat as _,kanbanVisibleLimit as v,sumKanbanValues as ee}from"@webority/ui-elements/elements/kanban";var te=e=>e.key??e.id,ne=e=>e.column,y=[`rupees`,`paise`],re=[`inline`,`stacked`];function b(b){let{columns:x,cards:S,renderCard:ie,renderColumnActions:ae,getCardKey:C=te,getCardColumn:w=ne,getCardValue:T,cardLabel:E,isCardLocked:D,onLocked:O,onMove:k,accept:A,filter:j,boardId:oe,ariaLabel:se=`Board`,emptyText:ce=m.empty,readOnly:le=!1,swipeHint:ue=!1,fill:M=!1,columnWidth:N,fillOffset:P,activeCardKey:F,headLayout:I=`inline`,summaryFormat:L,summaryUnit:R,className:z=``,id:B,...V}=b;if(!Array.isArray(x))throw Error(`<AppKanban> columns is required: pass the board's stage columns.`);if(!Array.isArray(S))throw Error(`<AppKanban> cards is required: pass the cards, an empty array for an empty board.`);n(`AppKanban`,V),t(`AppKanban`,`summaryFormat`,L,p),t(`AppKanban`,`summaryUnit`,R,y),t(`AppKanban`,`headLayout`,I,re);for(let e of x)t(`AppKanban`,`columns[].tone`,e.tone,h);let H=s(),U=B||`kanban-${H.replace(/[^a-zA-Z0-9_-]/g,``)}`,W=l(null),[G,K]=u(()=>new Map),[q,de]=u(()=>new Set),[fe,J]=u(()=>new Set),pe=c(()=>new Map(S.map(e=>[String(C(e)),e])),[S,C]),Y=l(null);Y.current={accept:A,onMove:k,onLocked:O,byKey:pe,columns:x};let X=L&&p.includes(L)&&(R==null||y.includes(R))?_(L,R):null,Z=c(()=>{let e=new Map(x.map(e=>[e.key,[]])),t=[];for(let n of S){let r=String(C(n)),i=G.get(r);i?t.push([n,i]):e.get(w(n))?.push(n)}for(let[n,r]of t){let t=e.get(r.to);t&&t.splice(Math.min(r.index,t.length),0,n)}return e},[x,S,G,C,w]);o(()=>{let e=W.current;if(!e)return;e.accept=(e,t,n)=>{let r=Y.current.accept;return!r||r(Y.current.byKey.get(e.getAttribute(`data-wui-card`)),t,n)};let t=e=>{let{key:t,from:n,to:r,index:a}=e.detail,o=Y.current.onMove,s=Y.current.byKey.get(t);if(!o||!s)return;let c=Y.current.columns.find(e=>e.key===r)?.visibleLimit!=null;c&&J(e=>new Set(e).add(t)),K(e=>new Map(e).set(t,{to:r,index:a}));let l=()=>K(e=>{let n=new Map(e);return n.delete(t),n}),u;try{u=o({card:s,key:t,from:n,to:r,index:a})}catch(e){u=Promise.reject(e)}Promise.resolve(u).then(l,e=>{l(),c&&J(e=>{let n=new Set(e);return n.delete(t),n}),i(e?.message||m.failed.server)})},n=e=>{let{key:t,reason:n}=e.detail,r=Y.current.byKey.get(t);r&&Y.current.onLocked?.({card:r,key:t,reason:n})};return e.addEventListener(`wui:kanban:move`,t),e.addEventListener(`wui:kanban:locked`,n),()=>{e.removeEventListener(`wui:kanban:move`,t),e.removeEventListener(`wui:kanban:locked`,n),e.accept=void 0}},[]);let Q=e=>!j||j(e)!==!1,me=(e,t)=>{q.has(e)&&J(e=>{let n=new Set(e);for(let e of t)n.delete(String(C(e)));return n}),de(t=>{let n=new Set(t);return n.delete(e)||n.add(e),n})},$={};return N!=null&&($[`--wui-kanban-column-width`]=`${N}px`),P!=null&&($[`--wui-kanban-fill-offset`]=`${P}px`),f(`wui-kanban`,{ref:W,id:U,class:z?`wui-kanban ${z}`:`wui-kanban`,role:`region`,"aria-label":se,"board-id":oe||void 0,"summary-format":X?L:void 0,"summary-unit":X&&R?R:void 0,readonly:le?``:void 0,fill:M?``:void 0,"data-head-layout":I===`stacked`?`stacked`:void 0,style:$,controlled:``,...e(`AppKanban`,b),...V,children:[d(`nav`,{className:`wui-kanban-switcher`,"aria-label":`Board columns`,children:x.map((e,t)=>f(`button`,{type:`button`,className:`wui-kanban-switch`,"data-wui-switch":e.key,"aria-controls":`${U}-${e.key}`,"aria-current":t===0?`true`:void 0,children:[d(`span`,{className:`wui-kanban-switch-title`,children:e.title}),d(`span`,{className:`wui-kanban-count`,"data-wui-count":``,children:(Z.get(e.key)||[]).filter(Q).length})]},e.key))}),ue&&f(`p`,{className:`wui-kanban-hint`,"aria-hidden":`true`,children:[d(r,{name:`arrow-swap-horizontal`,size:14}),m.swipeHint]}),d(`div`,{className:`wui-kanban-board`,"data-wui-scroller":``,children:x.map(e=>{let t=`${U}-${e.key}`,n=Z.get(e.key)||[],i=n.filter(Q),o=!!(e.collapsible&&e.collapsed),s=v(e.visibleLimit),c=q.has(e.key),l=g(i.map(e=>String(C(e))),s,c,fe),u=typeof e.summary==`function`?e.summary(i):e.summary;X&&(u=a(ee(i.map(e=>T?.(e))),X));let p=ae?.(e,i);return f(`section`,{className:`wui-kanban-column`,id:t,"data-wui-column":e.key,"data-tone":e.tone&&h.includes(e.tone)?e.tone:`neutral`,"aria-labelledby":`${t}-title`,"data-accept-from":e.acceptFrom?e.acceptFrom.join(` `):void 0,"data-collapsible":e.collapsible?``:void 0,"data-collapsed":o?``:void 0,children:[f(`header`,{className:`wui-kanban-head`,children:[d(`span`,{className:`wui-kanban-dot`,"aria-hidden":`true`}),d(`h2`,{className:`wui-kanban-title`,id:`${t}-title`,children:e.href?d(`a`,{href:e.href,children:e.title}):e.title}),d(`span`,{className:`wui-kanban-count`,"data-wui-count":``,children:i.length}),e.collapsible&&d(`span`,{className:`wui-kanban-lock`,"aria-hidden":`true`,children:d(r,{name:`lock`,size:14})}),p!=null&&p!==!1&&d(`div`,{className:`wui-kanban-actions`,"data-wui-no-drag":``,children:p}),e.collapsible&&d(`button`,{type:`button`,className:`wui-kanban-collapse`,"data-wui-collapse":``,"aria-expanded":o?`false`:`true`,"aria-controls":`${t}-body`,"aria-label":o?m.expand(e.title):m.collapse(e.title),children:d(r,{name:`chevron-left`,size:16})}),u!=null&&d(`div`,{className:`wui-kanban-summary`,"data-wui-summary":``,children:u})]}),d(`p`,{className:`wui-kanban-drop-note`,"data-wui-drop-note":``,hidden:!0}),d(`div`,{className:`wui-kanban-body`,id:`${t}-body`,"data-wui-body":``,children:n.map(e=>{let t=String(C(e)),n=G.has(t);return d(`article`,{className:`wui-kanban-card`,"data-wui-card":t,tabIndex:0,"aria-label":E?E(e):void 0,"data-wui-locked":D?.(e)?``:void 0,"data-wui-value":T?T(e)??void 0:void 0,"aria-current":F!=null&&t===String(F)?`true`:void 0,"aria-busy":n?`true`:void 0,"data-wui-saving":n?``:void 0,"data-wui-overflow":l.has(t)?``:void 0,hidden:!Q(e),children:ie?.(e)},t)})}),s!=null&&d(`button`,{type:`button`,className:`wui-kanban-more`,"data-wui-more":``,"aria-controls":`${t}-body`,"aria-expanded":c?`true`:`false`,hidden:c?i.length<=s:l.size===0,onClick:()=>me(e.key,n),children:c?m.fewer:m.more(l.size)}),d(`p`,{className:`wui-kanban-empty`,"data-wui-empty":``,hidden:i.length>0,children:e.emptyText??ce})]},e.key)})}),d(`p`,{className:`visually-hidden`,id:`${U}-help`,"data-wui-help":``,children:m.help}),d(`div`,{className:`visually-hidden`,"data-wui-live":``,"aria-live":`polite`,"aria-atomic":`true`})]})}export{b 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{errorToast as i}from"./toast.js";import{formatValue as a}from"@webority/ui-elements/helpers";import{useEffect as o,useId as s,useMemo as c,useRef as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{KANBAN_SUMMARY_FORMATS as p,KANBAN_TEXT as m,KANBAN_TONES as h,kanbanOverflow as g,kanbanSummaryFormat as _,kanbanVisibleLimit as v,sumKanbanValues as ee}from"@webority/ui-elements/elements/kanban";var te=e=>e.key??e.id,ne=e=>e.column,y=[`rupees`,`paise`],re=[`inline`,`stacked`];function b(b){let{columns:x,cards:S,renderCard:C,renderColumnActions:w,getCardKey:T=te,getCardColumn:E=ne,getCardValue:D,cardLabel:O,isCardLocked:k,onLocked:A,onMove:j,accept:ie,filter:ae,boardId:oe,ariaLabel:se=`Board`,emptyText:ce=m.empty,readOnly:le=!1,swipeHint:ue=!1,fill:M=!1,columnWidth:N,fillOffset:P,activeCardKey:F,headLayout:I=`inline`,summaryFormat:L,summaryUnit:R,className:z=``,id:B,...V}=b;if(!Array.isArray(x))throw Error(`<AppKanban> columns is required: pass the board's stage columns.`);if(!Array.isArray(S))throw Error(`<AppKanban> cards is required: pass the cards, an empty array for an empty board.`);n(`AppKanban`,V),t(`AppKanban`,`summaryFormat`,L,p),t(`AppKanban`,`summaryUnit`,R,y),t(`AppKanban`,`headLayout`,I,re);for(let e of x)t(`AppKanban`,`columns[].tone`,e.tone,h);let H=s(),U=B||`kanban-${H.replace(/[^a-zA-Z0-9_-]/g,``)}`,W=l(null),[G,K]=u(()=>new Map),[q,de]=u(()=>new Set),[fe,J]=u(()=>new Set),pe=c(()=>new Map(S.map(e=>[String(T(e)),e])),[S,T]),Y=l(null);Y.current={accept:ie,onMove:j,onLocked:A,byKey:pe,columns:x};let X=L&&p.includes(L)&&(R==null||y.includes(R))?_(L,R):null,Z=c(()=>{let e=new Map(x.map(e=>[e.key,[]])),t=[];for(let n of S){let r=String(T(n)),i=G.get(r);i?t.push([n,i]):e.get(E(n))?.push(n)}for(let[n,r]of t){let t=e.get(r.to);t&&t.splice(Math.min(r.index,t.length),0,n)}return e},[x,S,G,T,E]);o(()=>{let e=W.current;if(!e)return;e.accept=(e,t,n)=>{let r=Y.current.accept;return!r||r(Y.current.byKey.get(e.getAttribute(`data-wui-card`)),t,n)};let t=e=>{let{key:t,from:n,to:r,index:a}=e.detail,o=Y.current.onMove,s=Y.current.byKey.get(t);if(!o||!s)return;let c=Y.current.columns.find(e=>e.key===r)?.visibleLimit!=null;c&&J(e=>new Set(e).add(t)),K(e=>new Map(e).set(t,{to:r,index:a}));let l=()=>K(e=>{let n=new Map(e);return n.delete(t),n}),u;try{u=o({card:s,key:t,from:n,to:r,index:a})}catch(e){u=Promise.reject(e)}Promise.resolve(u).then(l,e=>{l(),c&&J(e=>{let n=new Set(e);return n.delete(t),n}),i(e?.message||m.failed.server)})},n=e=>{let{key:t,reason:n}=e.detail,r=Y.current.byKey.get(t);r&&Y.current.onLocked?.({card:r,key:t,reason:n})};return e.addEventListener(`wui:kanban:move`,t),e.addEventListener(`wui:kanban:locked`,n),()=>{e.removeEventListener(`wui:kanban:move`,t),e.removeEventListener(`wui:kanban:locked`,n),e.accept=void 0}},[]);let Q=e=>ae?.(e)!==!1,me=(e,t)=>{q.has(e)&&J(e=>{let n=new Set(e);for(let e of t)n.delete(String(T(e)));return n}),de(t=>{let n=new Set(t);return n.delete(e)||n.add(e),n})},$={};return N!=null&&($[`--wui-kanban-column-width`]=`${N}px`),P!=null&&($[`--wui-kanban-fill-offset`]=`${P}px`),f(`wui-kanban`,{ref:W,id:U,class:z?`wui-kanban ${z}`:`wui-kanban`,role:`region`,"aria-label":se,"board-id":oe||void 0,"summary-format":X?L:void 0,"summary-unit":X&&R?R:void 0,readonly:le?``:void 0,fill:M?``:void 0,"data-head-layout":I===`stacked`?`stacked`:void 0,style:$,controlled:``,...e(`AppKanban`,b),...V,children:[d(`nav`,{className:`wui-kanban-switcher`,"aria-label":`Board columns`,children:x.map((e,t)=>f(`button`,{type:`button`,className:`wui-kanban-switch`,"data-wui-switch":e.key,"aria-controls":`${U}-${e.key}`,"aria-current":t===0?`true`:void 0,children:[d(`span`,{className:`wui-kanban-switch-title`,children:e.title}),d(`span`,{className:`wui-kanban-count`,"data-wui-count":``,children:(Z.get(e.key)||[]).filter(Q).length})]},e.key))}),ue&&f(`p`,{className:`wui-kanban-hint`,"aria-hidden":`true`,children:[d(r,{name:`arrow-swap-horizontal`,size:14}),m.swipeHint]}),d(`div`,{className:`wui-kanban-board`,"data-wui-scroller":``,children:x.map(e=>{let t=`${U}-${e.key}`,n=Z.get(e.key)||[],i=n.filter(Q),o=!!(e.collapsible&&e.collapsed),s=v(e.visibleLimit),c=q.has(e.key),l=g(i.map(e=>String(T(e))),s,c,fe),u=typeof e.summary==`function`?e.summary(i):e.summary;X&&(u=a(ee(i.map(e=>D?.(e))),X));let p=w?.(e,i);return f(`section`,{className:`wui-kanban-column`,id:t,"data-wui-column":e.key,"data-tone":e.tone&&h.includes(e.tone)?e.tone:`neutral`,"aria-labelledby":`${t}-title`,"data-accept-from":e.acceptFrom?e.acceptFrom.join(` `):void 0,"data-collapsible":e.collapsible?``:void 0,"data-collapsed":o?``:void 0,children:[f(`header`,{className:`wui-kanban-head`,children:[d(`span`,{className:`wui-kanban-dot`,"aria-hidden":`true`}),d(`h2`,{className:`wui-kanban-title`,id:`${t}-title`,children:e.href?d(`a`,{href:e.href,children:e.title}):e.title}),d(`span`,{className:`wui-kanban-count`,"data-wui-count":``,children:i.length}),e.collapsible&&d(`span`,{className:`wui-kanban-lock`,"aria-hidden":`true`,children:d(r,{name:`lock`,size:14})}),p!=null&&p!==!1&&d(`div`,{className:`wui-kanban-actions`,"data-wui-no-drag":``,children:p}),e.collapsible&&d(`button`,{type:`button`,className:`wui-kanban-collapse`,"data-wui-collapse":``,"aria-expanded":o?`false`:`true`,"aria-controls":`${t}-body`,"aria-label":o?m.expand(e.title):m.collapse(e.title),children:d(r,{name:`chevron-left`,size:16})}),u!=null&&d(`div`,{className:`wui-kanban-summary`,"data-wui-summary":``,children:u})]}),d(`p`,{className:`wui-kanban-drop-note`,"data-wui-drop-note":``,hidden:!0}),d(`div`,{className:`wui-kanban-body`,id:`${t}-body`,"data-wui-body":``,children:n.map(e=>{let t=String(T(e)),n=G.has(t);return d(`article`,{className:`wui-kanban-card`,"data-wui-card":t,tabIndex:0,"aria-label":O?O(e):void 0,"data-wui-locked":k?.(e)?``:void 0,"data-wui-value":D?D(e)??void 0:void 0,"aria-current":F!=null&&t===String(F)?`true`:void 0,"aria-busy":n?`true`:void 0,"data-wui-saving":n?``:void 0,"data-wui-overflow":l.has(t)?``:void 0,hidden:!Q(e),children:C?.(e)},t)})}),s!=null&&d(`button`,{type:`button`,className:`wui-kanban-more`,"data-wui-more":``,"aria-controls":`${t}-body`,"aria-expanded":c?`true`:`false`,hidden:c?i.length<=s:l.size===0,onClick:()=>me(e.key,n),children:c?m.fewer:m.more(l.size)}),d(`p`,{className:`wui-kanban-empty`,"data-wui-empty":``,hidden:i.length>0,children:e.emptyText??ce})]},e.key)})}),d(`p`,{className:`visually-hidden`,id:`${U}-help`,"data-wui-help":``,children:m.help}),d(`div`,{className:`visually-hidden`,"data-wui-live":``,"aria-live":`polite`,"aria-atomic":`true`})]})}export{b as default};

package/dist/components/AppSkeletonLines.js

@@ -0,0 +1 @@
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{jsx as r}from"react/jsx-runtime";var i=Array.from({length:12},(e,t)=>t+1),a=3;function o(o){let{lines:s=a,lastLineWidth:c=`60%`,className:l=``,style:u,...d}=o;n(`AppSkeletonLines`,d),t(`AppSkeletonLines`,`lines`,s,i);let f=i.includes(s)?s:a;return r(`div`,{className:[`wui-skeleton-lines`,l].filter(Boolean).join(` `),"aria-hidden":`true`,style:u,...e(`AppSkeletonLines`,o),...d,children:Array.from({length:f},(e,t)=>r(`span`,{className:`skeleton`,style:t===f-1?{width:c}:void 0},`line-${t}`))})}export{o as default};

package/dist/components/AppTextarea.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import n from"../lib/FieldMessage.js";import r from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{forwardRef as a,useCallback as o,useEffect as s,useId as c,useLayoutEffect as l,useRef as u,useState as d}from"react";import{Form as f}from"react-bootstrap";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h=a(function(a,h){let{label:g,required:_=!1,error:v,hint:y,help:b,helpLabel:x=`More information`,id:S,name:C,rows:w=4,autoGrow:T=!1,showCount:E=!1,maxLength:D,disabled:O=!1,readOnly:k=!1,className:A=``,fieldClassName:j=``,"data-canvas":M,...N}=a;t(`AppTextarea`,N);let P=c(),F=S||P,I=[`textarea`,T?`autosize`:``,v?`error`:``,A].filter(Boolean).join(` `),L=v&&F?`${F}-error`:void 0,R=y&&F?`${F}-hint`:void 0,z=L||R,B=u(null),V=e=>{B.current=e,typeof h==`function`?h(e):h&&(h.current=e)},H=o(()=>{let e=B.current;e&&(e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`)},[]);l(()=>{T&&H()},[T,H,N.value]);let[U,W]=d(()=>String(N.value??N.defaultValue??``).length);s(()=>{!E||N.value===void 0||W(String(N.value??``).length)},[N.value,E]);let G=e=>{T&&H(),E&&W(e.target.value.length),N.onInput?.(e)};return m(f.Group,{...e(`AppTextarea`,a),className:`field${j?` ${j}`:``}`,children:[g&&m(f.Label,{className:`label`,htmlFor:F,children:[g,_&&p(i,{}),b&&p(r,{label:x,children:b})]}),p(f.Control,{as:`textarea`,id:F,name:C,rows:w,className:I,"aria-invalid":v?`true`:`false`,"aria-describedby":z,required:_,maxLength:D,disabled:O,readOnly:k,...N,ref:V,onInput:G}),p(n,{error:v,hint:y,errorId:L,hintId:R}),E&&m(`div`,{className:`field-count${D&&U>=D?` at-limit`:``}`,children:[U,D?` / ${D}`:``]})]})});export{h as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnUnknownProps.js";import r from"../lib/FieldMessage.js";import i from"./AppInfoTip.js";import a from"./AppRequiredMark.js";import{forwardRef as o,useCallback as s,useEffect as c,useId as l,useLayoutEffect as u,useRef as d,useState as f}from"react";import{Form as p}from"react-bootstrap";import{jsx as m,jsxs as h}from"react/jsx-runtime";var g=o(function(o,g){let{label:_,required:v=!1,optional:y=!1,error:b,hint:x,help:S,helpLabel:C=`More information`,id:w,name:T,rows:E=4,autoGrow:D=!1,showCount:O=!1,maxLength:k,disabled:A=!1,readOnly:j=!1,className:M=``,fieldClassName:N=``,"data-canvas":P,...F}=o;n(`AppTextarea`,F),c(()=>{y&&v&&typeof process<`u`&&process.env.NODE_ENV!==`production`&&t(`AppTextarea: optional and required together; optional ignored`)},[y,v]);let I=l(),L=w||I,R=[`textarea`,D?`autosize`:``,b?`error`:``,M].filter(Boolean).join(` `),z=b&&L?`${L}-error`:void 0,B=x&&L?`${L}-hint`:void 0,V=z||B,H=d(null),U=e=>{H.current=e,typeof g==`function`?g(e):g&&(g.current=e)},W=s(()=>{let e=H.current;e&&(e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`)},[]);u(()=>{D&&W()},[D,W,F.value]);let[G,K]=f(()=>String(F.value??F.defaultValue??``).length);c(()=>{!O||F.value===void 0||K(String(F.value??``).length)},[F.value,O]);let q=e=>{D&&W(),O&&K(e.target.value.length),F.onInput?.(e)};return h(p.Group,{...e(`AppTextarea`,o),className:`field${N?` ${N}`:``}`,children:[_&&h(p.Label,{className:`label`,htmlFor:L,children:[_,y&&!v&&m(`span`,{className:`label-optional`,children:` (optional)`}),v&&m(a,{}),S&&m(i,{label:C,children:S})]}),m(p.Control,{as:`textarea`,id:L,name:T,rows:E,className:R,"aria-invalid":b?`true`:`false`,"aria-describedby":V,required:v,maxLength:k,disabled:A,readOnly:j,...F,ref:U,onInput:q}),m(r,{error:b,hint:x,errorId:z,hintId:B}),O&&h(`div`,{className:`field-count${k&&G>=k?` at-limit`:``}`,children:[G,k?` / ${k}`:``]})]})});export{g as default};

package/dist/components/AppTooltip.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{shortcutChip as r}from"../lib/shortcutChip.js";import{cloneElement as i,useId as a,useState as o}from"react";import{OverlayTrigger as s,Tooltip as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d=[`default`,`dark`,`primary`,`success`,`warning`,`danger`],f=[`sm`,`md`,`lg`],p={start:`left`,end:`right`,top:`top`,bottom:`bottom`},m=[`auto`,`top`,`bottom`,`start`,`end`],h={modifiers:[{name:`offset`,options:{offset:[0,6]}}]};function g(g){let{content:_,children:v,placement:y=`top`,tone:b=`default`,size:x=`md`,open:S,shortcut:C,className:w=``,...T}=g;n(`AppTooltip`,T),t(`AppTooltip`,`tone`,b,d),t(`AppTooltip`,`size`,x,f),t(`AppTooltip`,`placement`,y,m);let E=a(),[D,O]=o(!1),k=typeof S==`boolean`,A=u(c,{id:E,className:[`wui-tooltip`,b&&b!=="default"?`tone-${b}`:``,x&&x!==`md`?`size-${x}`:``,w].filter(Boolean).join(` `),...e(`AppTooltip`,g),children:[_,r(C,{inTooltip:!0})]}),j=e=>{v.props.onClick?.(e),T.onClick?.(e),O(!1)};return l(s,{trigger:[`hover`,`focus`],placement:p[y]||y,popperConfig:h,show:k?S:D,onToggle:k?void 0:e=>O(e),overlay:A,children:k?i(v,T):i(v,{...T,onClick:j})})}export{g as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{shortcutChip as r}from"../lib/shortcutChip.js";import{cloneElement as i,useId as a,useRef as o,useState as s}from"react";import{OverlayTrigger as c,Tooltip as l}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`default`,`dark`,`primary`,`success`,`warning`,`danger`],p=[`sm`,`md`,`lg`],m={start:`left`,end:`right`,top:`top`,bottom:`bottom`},h=[`auto`,`top`,`bottom`,`start`,`end`],g={modifiers:[{name:`offset`,options:{offset:[0,6]}}]};function _(_){let{content:v,children:y,placement:b=`top`,tone:x=`default`,size:S=`md`,open:C,shortcut:w,className:T=``,...E}=_;n(`AppTooltip`,E),t(`AppTooltip`,`tone`,x,f),t(`AppTooltip`,`size`,S,p),t(`AppTooltip`,`placement`,b,h);let D=a(),[O,k]=s(!1),A=typeof C==`boolean`,j=d(l,{id:D,className:[`wui-tooltip`,x&&x!=="default"?`tone-${x}`:``,S&&S!==`md`?`size-${S}`:``,T].filter(Boolean).join(` `),...e(`AppTooltip`,_),children:[v,r(w,{inTooltip:!0})]}),M=e=>{y.props.onClick?.(e),E.onClick?.(e),k(!1)},N=o(!1),P=e=>{y.props.onFocusCapture?.(e),E.onFocusCapture?.(e),N.current=!e.currentTarget.matches?.(`:focus-visible`),queueMicrotask(()=>{N.current=!1})};return u(c,{trigger:[`hover`,`focus`],placement:m[b]||b,popperConfig:g,show:A?C:O,onToggle:A?void 0:e=>{let t=N.current;N.current=!1,!(e&&t)&&k(e)},overlay:j,children:A?i(y,E):i(y,{...E,onClick:M,onFocusCapture:P})})}export{_ as default};

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.98.0"
+    "version": "0.100.0"
   },
   "components": [
     {
@@ -7460,6 +7460,39 @@
         ]
       }
     },
+    {
+      "name": "AppSkeletonLines",
+      "usage": {
+        "when": [
+          "A paragraph of text is loading and the page should hold its shape.",
+          "A card or a description is waiting for its first data."
+        ],
+        "whenNot": [
+          {
+            "text": "A single bar stands in for one element, such as a heading or a value.",
+            "instead": "AppSkeleton"
+          },
+          {
+            "text": "A table is loading its first page.",
+            "instead": "AppSkeletonRows"
+          },
+          {
+            "text": "The data loaded but the result set is empty.",
+            "instead": "AppEmptyState"
+          },
+          {
+            "text": "The whole page is blocked on a single request.",
+            "instead": "a page-level spinner"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The wrapper is aria-hidden, so screen readers skip the placeholder lines.",
+          "The lines have no role and take no focus."
+        ]
+      }
+    },
     {
       "name": "AppSkeletonRows",
       "usage": {

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

@@ -32,4 +32,4 @@ export default function AppBanner(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -22,6 +22,7 @@ export declare function buttonVariantClass(variant: any): string;
  * @param {"rounded"|"pill"|"sharp"} [props.shape]
  * @param {"linear"|"outline"|"bold"|"bulk"|"broken"|"twotone"} [props.iconVariant]
  * @param {string} [props.className]
+ * @param {boolean|number} [props.vibrate] `true` buzzes 10 ms on a tap, a whole number 1 to 100 buzzes that many ms; phones only.
  * @param {(event: import('react').MouseEvent<HTMLElement>) => void} [props.onClick] Runs on a click; ignored on a static button.
  */
 export default function AppButton(props: {
@@ -98,5 +99,7 @@ export default function AppButton(props: {
      * @default ""
      */
     className?: string;
+    /** Phones only: true buzzes 10 ms on a tap, or a whole number of milliseconds from 1 to 100. Not applied while disabled or loading; ignored where the browser has no vibration. */
+    vibrate?: boolean | number;
     onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
 }): any;

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

@@ -115,4 +115,4 @@ export default function AppCard(props: {
      * @default "Close"
      */
     closeLabel?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -79,4 +79,4 @@ export default function AppConfirmDialog(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -19,4 +19,4 @@ export default function AppCountryFlag(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -35,4 +35,4 @@ export default function AppErrorSummary(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -31,4 +31,4 @@ export default function AppInfoTip(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -6,6 +6,11 @@ declare const AppInput: import("react").ForwardRefExoticComponent<{
      * @default false
      */
     required?: boolean;
+    /**
+     * Ends the label with (optional) when the field is not required. Required wins when both are set.
+     * @default false
+     */
+    optional?: boolean;
     /** A validation message under the field. It marks the control invalid for assistive technology. */
     error?: string;
     /** Help text under the field. An error replaces it while both are set. */

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

@@ -67,4 +67,4 @@ export default function AppOnboardingChecklist(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -36,4 +36,4 @@ export default function AppPagination(props: {
     ariaLabel?: string;
     /** Extra CSS class to add to the nav wrapper. */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -33,4 +33,4 @@ export default function AppQrCode(props: {
     /** Extra classes on the code. */
     className?: string;
     style?: import('react').CSSProperties;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,28 @@
+/**
+ * Placeholder lines while text loads: a column of skeleton bars, each one text line tall. Every line
+ * is full width except the last, which takes `lastLineWidth`, so the block reads as a paragraph.
+ *
+ * @param {object} props
+ * @param {number} [props.lines] How many lines, an integer from 1 to 12.
+ * @param {string} [props.lastLineWidth] Width of the last line as any CSS length.
+ * @param {string} [props.className]
+ * @param {import('react').CSSProperties} [props.style]
+ */
+export default function AppSkeletonLines(props: {
+    /**
+     * How many lines to draw, an integer from 1 to 12. Any other value renders the default and warns.
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Width of the last line as a CSS length string, such as 60% or 12rem. The other lines are full width.
+     * @default "60%"
+     */
+    lastLineWidth?: string;
+    /**
+     * Extra class names added to the wrapper.
+     * @default ""
+     */
+    className?: string;
+    style?: import('react').CSSProperties;
+}): import("react").JSX.Element;

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

@@ -35,4 +35,4 @@ export default function AppSparkline(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

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

@@ -6,6 +6,11 @@ declare const AppTextarea: import("react").ForwardRefExoticComponent<{
      * @default false
      */
     required?: boolean;
+    /**
+     * Ends the label with (optional) when the field is not required. Required wins when both are set.
+     * @default false
+     */
+    optional?: boolean;
     /** An error message. It replaces the hint and marks the field invalid. */
     error?: string;
     /** Help text under the field. */

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

@@ -1,5 +1,5 @@
 /**
- * A plain tooltip on any element (hover or focus to reveal). Distinct from AppInfoTip (a help
+ * A plain tooltip on any element (hover or keyboard focus to reveal). Distinct from AppInfoTip (a help
  * "?" icon beside a label) and AppPopover (a click-opened panel). Wraps react-bootstrap's
  * OverlayTrigger/Tooltip (Popper positioning); the Razor counterpart `<app-tooltip>` uses
  * Bootstrap's own tooltip, so both surfaces stay in lockstep.

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

@@ -1,39 +1,39 @@
 import "@webority/ui-elements/elements/status-icon";
 export declare const SuccessIcon: ({ size }: {
-    size?: number;
+    size?: number | undefined;
 }) => import("react").JSX.Element;
 export declare const ErrorIcon: ({ size }: {
-    size?: number;
+    size?: number | undefined;
 }) => import("react").JSX.Element;
 export declare const WarningIcon: ({ size }: {
-    size?: number;
+    size?: number | undefined;
 }) => import("react").JSX.Element;
 export declare const InfoIcon: ({ size }: {
-    size?: number;
+    size?: number | undefined;
 }) => import("react").JSX.Element;
 export declare const DeleteIcon: ({ size }: {
-    size?: number;
+    size?: number | undefined;
 }) => import("react").JSX.Element;
 export declare const PrimaryIcon: ({ size }: {
-    size?: number;
+    size?: number | undefined;
 }) => import("react").JSX.Element;
 export declare const MODAL_ICONS: {
     success: ({ size }: {
-        size?: number;
+        size?: number | undefined;
     }) => import("react").JSX.Element;
     error: ({ size }: {
-        size?: number;
+        size?: number | undefined;
     }) => import("react").JSX.Element;
     warning: ({ size }: {
-        size?: number;
+        size?: number | undefined;
     }) => import("react").JSX.Element;
     info: ({ size }: {
-        size?: number;
+        size?: number | undefined;
     }) => import("react").JSX.Element;
     delete: ({ size }: {
-        size?: number;
+        size?: number | undefined;
     }) => import("react").JSX.Element;
     primary: ({ size }: {
-        size?: number;
+        size?: number | undefined;
     }) => import("react").JSX.Element;
 };

package/dist/types/components/iconGlyphs.g.d.ts

@@ -217,6 +217,6 @@ export declare const GLYPHS: {
 export declare const iconNames: string[];
 /** The library's single icon SVG emitter — identical markup to Razor's IconMarkup.Render. */
 export declare function glyphSvg(name: any, { size, className }?: {
-    className?: string;
-    size?: number;
+    className?: string | undefined;
+    size?: number | undefined;
 }): string;