@webority/ui-react 0.53.1 → 0.55.0

package/dist/components/AppTour.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import"@webority/ui-elements/elements/tour";import{forwardRef as t,useEffect as n,useLayoutEffect as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";var o=t(function({open:t,onClose:o,tourId:s,steps:c,seenStore:l,onBeforeStep:u,labels:d,className:f,...p},m){e(`AppTour`,p);let h=i(null),g=e=>{h.current=e,typeof m==`function`?m(e):m&&(m.current=e)};r(()=>{let e=h.current;e.seenStore=l??null,e.onBeforeStep=u??null}),r(()=>{let e=h.current;t?e.setAttribute(`open`,``):e.removeAttribute(`open`)},[t]);let _=i(o);return _.current=o,n(()=>{let e=h.current,t=e=>_.current?.(e.detail.reason);return e.addEventListener(`wui-tour:close`,t),()=>e.removeEventListener(`wui-tour:close`,t)},[]),a(`wui-tour`,{ref:g,"tour-id":s,"back-label":d?.back,"next-label":d?.next,"skip-label":d?.skip,"done-label":d?.done,class:f||void 0,...p,children:c.map(e=>a(`wui-tour-step`,{target:e.target,title:e.title,children:e.description},`${e.target}|${e.description}`))})});export{o as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import"@webority/ui-elements/elements/tour";import{forwardRef as n,useEffect as r,useLayoutEffect as i,useRef as a}from"react";import{jsx as o}from"react/jsx-runtime";var s=[`image`,`video`],c=[`click`],l=n(function({open:n,onClose:l,tourId:u,steps:d,seenStore:f,onBeforeStep:p,labels:m,endDialog:h=!0,className:g,..._},v){t(`AppTour`,_);for(let t of d)e(`AppTour`,`steps[].mediaType`,t.mediaType,s),e(`AppTour`,`steps[].advanceOn`,t.advanceOn,c);let y=a(null),b=e=>{y.current=e,typeof v==`function`?v(e):v&&(v.current=e)};i(()=>{let e=y.current;e.seenStore=f??null,e.onBeforeStep=p??null}),i(()=>{let e=y.current;n?e.setAttribute(`open`,``):e.removeAttribute(`open`)},[n]);let x=a(l);return x.current=l,r(()=>{let e=y.current,t=e=>{let{reason:t,index:n,position:r,total:i}=e.detail;x.current?.(t,{index:n,position:r,total:i})};return e.addEventListener(`wui-tour:close`,t),()=>e.removeEventListener(`wui-tour:close`,t)},[]),o(`wui-tour`,{ref:b,"tour-id":u,"back-label":m?.back,"next-label":m?.next,"skip-label":m?.skip,"done-label":m?.done,"progress-label":m?.progress,"advance-label":m?.advance,"media-pause-label":m?.mediaPause,"media-play-label":m?.mediaPlay,"end-title":m?.endTitle,"end-message":m?.endMessage,"end-button":m?.endButton,"end-dialog":h===!1?`false`:void 0,class:g||void 0,..._,children:d.map(e=>o(`wui-tour-step`,{target:e.target,title:e.title,media:e.media,"media-alt":e.mediaAlt,"media-poster":e.mediaPoster,"media-type":e.mediaType,"advance-on":e.advanceOn,"action-label":e.actionLabel,children:e.description},`${e.target}|${e.description}`))})});export{l as default};

package/dist/components/AppTruncate.js

@@ -0,0 +1 @@
+import e from"./warnUnknownProps.js";import{jsx as t}from"react/jsx-runtime";import"@webority/ui-elements/elements/truncate";function n({children:n,lines:r=1,width:i,style:a,className:o=``,...s}){e(`AppTruncate`,s);let c=Number.isInteger(r)&&r>1,l={...c?{"--wui-truncate-lines":r}:null,...i?{"--wui-truncate-width":i}:null,...a};return t(`wui-truncate`,{class:[`wui-truncate`,c&&`wui-truncate-multi`,o].filter(Boolean).join(` `),style:Object.keys(l).length?l:void 0,...s,children:t(`span`,{className:`wui-truncate-text`,children:n})})}export{n as default};

package/dist/components/AppWhatsNew.js

@@ -0,0 +1 @@
+import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import{formatDate as n}from"@webority/ui-elements/helpers";import{useEffect as r,useRef as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import"@webority/ui-elements/elements/whats-new";function s({entries:s=[],storageKey:c,label:l=`What's new`,unreadLabel:u=`unread`,emptyText:d=`Nothing new yet`,onRead:f,className:p=``,...m}){e(`AppWhatsNew`,m);let h=i(null),g=i(f);return g.current=f,r(()=>{let e=h.current,t=e=>g.current?.(e.detail.through);return e.addEventListener(`wui-whats-new-read`,t),()=>e.removeEventListener(`wui-whats-new-read`,t)},[]),o(`wui-whats-new`,{ref:h,class:[`wui-whats-new`,p].filter(Boolean).join(` `),"storage-key":c||void 0,...m,children:[o(`button`,{type:`button`,className:`u-action wui-whats-new-trigger`,"aria-haspopup":`dialog`,children:[a(t,{name:`gift`,size:20}),a(`span`,{className:`wui-whats-new-name`,children:l}),a(`span`,{className:`wui-whats-new-unread`,children:` ${u}`}),a(`span`,{className:`wui-whats-new-dot`,"aria-hidden":`true`})]}),o(`div`,{className:`wui-whats-new-panel`,role:`dialog`,"aria-label":l,tabIndex:-1,children:[a(`h2`,{className:`wui-whats-new-title`,children:l}),s.length>0?a(`ol`,{className:`wui-whats-new-list`,children:s.map((e,t)=>o(`li`,{className:`wui-whats-new-entry`,children:[a(`time`,{className:`wui-whats-new-date`,dateTime:e.date,children:n(e.date)}),a(`h3`,{className:`wui-whats-new-entry-title`,children:e.title}),e.body&&a(`p`,{className:`wui-whats-new-body`,children:e.body}),e.imageSrc&&a(`img`,{className:`wui-whats-new-image`,src:e.imageSrc,alt:e.imageAlt??``,loading:`lazy`}),e.href&&a(`a`,{className:`wui-whats-new-link`,href:e.href,children:e.linkLabel||`Learn more`})]},e.id??`${e.date}-${t}`))}):a(`p`,{className:`wui-whats-new-empty`,children:d})]})]})}export{s as default};

package/dist/components/withTooltip.js

@@ -1 +1 @@
-import e from"./AppTooltip.js";import{jsx as t}from"react/jsx-runtime";function n(n,r,i){return r==null||r===``?n:t(e,{content:r,placement:i||`auto`,children:n})}export{n as default};
+import e from"./AppTooltip.js";import{jsx as t}from"react/jsx-runtime";function n(n,r,i,a){return r==null||r===``?n:t(e,{content:r,placement:i||`auto`,shortcut:a,children:n})}export{n as default};

package/dist/lib/emptyIllustration.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";var t={"no-results":`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><rect class="wui-ill-card" x="30" y="16" width="64" height="80" rx="8"/><rect class="wui-ill-mute" x="40" y="28" width="30" height="5" rx="2.5"/><rect class="wui-ill-mute" x="40" y="40" width="44" height="5" rx="2.5"/><rect class="wui-ill-mute" x="40" y="52" width="36" height="5" rx="2.5"/><circle class="wui-ill-soft" cx="96" cy="66" r="22"/><circle class="wui-ill-accent-line" cx="96" cy="66" r="22"/><path class="wui-ill-accent-line wui-ill-thick" d="M112 82l14 14"/><path class="wui-ill-accent-line" d="M89 59l14 14M103 59l-14 14"/>`,"no-data":`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><path class="wui-ill-ink" d="M30 20v76h100"/><rect class="wui-ill-dash" x="44" y="62" width="16" height="34" rx="3"/><rect class="wui-ill-dash" x="70" y="44" width="16" height="52" rx="3"/><rect class="wui-ill-dash" x="96" y="28" width="16" height="68" rx="3"/><circle class="wui-ill-accent" cx="122" cy="26" r="5"/>`,"empty-inbox":`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><circle class="wui-ill-soft" cx="80" cy="24" r="14"/><path class="wui-ill-accent-line" d="M73 24l5 5 9-10"/><path class="wui-ill-card" d="M32 66l11-26a6 6 0 0 1 5.5-3.6h63a6 6 0 0 1 5.5 3.6L128 66v22a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8z"/><path class="wui-ill-ink" d="M32 66h30a6 6 0 0 1 6 6 12 12 0 0 0 24 0 6 6 0 0 1 6-6h30"/>`,"no-notifications":`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><path class="wui-ill-ink" d="M80 22v-6"/><path class="wui-ill-card" d="M80 22c-14 0-24 10-24 24v14l-8 12h64l-8-12V46c0-14-10-24-24-24z"/><circle class="wui-ill-accent" cx="80" cy="84" r="6"/><path class="wui-ill-ink" d="M112 30h10l-10 12h10M126 16h7l-7 8h7"/>`,"no-files":`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><path class="wui-ill-soft" d="M28 38a6 6 0 0 1 6-6h24l9 10h59a6 6 0 0 1 6 6v36a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8z"/><path class="wui-ill-ink" d="M28 38a6 6 0 0 1 6-6h24l9 10h59a6 6 0 0 1 6 6v36a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8z"/><path class="wui-ill-card" d="M28 58a6 6 0 0 1 6-6h92a6 6 0 0 1 6 6v28a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8z"/><path class="wui-ill-accent-line" d="M80 66v16M72 74h16"/>`,"no-access":`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><path class="wui-ill-ink" d="M62 54V44a18 18 0 0 1 36 0v10"/><rect class="wui-ill-card" x="52" y="54" width="56" height="42" rx="8"/><circle class="wui-ill-accent" cx="80" cy="71" r="5"/><path class="wui-ill-accent-line" d="M80 76v8"/>`,offline:`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><path class="wui-ill-card" d="M54 88a15 15 0 0 1-1.5-29.9 24 24 0 0 1 46.3-4.6A17 17 0 0 1 108 88z"/><path class="wui-ill-accent-line wui-ill-thick" d="M46 36l72 60"/>`,error:`<ellipse class="wui-ill-mute" cx="80" cy="104" rx="44" ry="6"/><rect class="wui-ill-card" x="44" y="16" width="72" height="82" rx="8"/><rect class="wui-ill-mute" x="56" y="26" width="30" height="5" rx="2.5"/><circle class="wui-ill-danger" cx="80" cy="60" r="20"/><path class="wui-ill-danger-line" d="M80 50v12"/><circle class="wui-ill-danger-fill" cx="80" cy="70" r="2.5"/><rect class="wui-ill-mute" x="62" y="86" width="36" height="5" rx="2.5"/>`},n=Object.keys(t);function r({name:n,className:r}){let i=n&&Object.hasOwn(t,n)?t[n]:void 0;return i?e(`svg`,{className:r?`wui-illustration ${r}`:`wui-illustration`,"data-illustration":n,viewBox:`0 0 160 120`,fill:`none`,"aria-hidden":`true`,focusable:`false`,dangerouslySetInnerHTML:{__html:i}}):null}export{t as ILLUSTRATION_BODIES,n as ILLUSTRATION_NAMES,r as default};

package/dist/lib/sectionShell.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";var n=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],r=[`start`,`center`],i=[`default`,`muted`];function a(e,t){return n.includes(e)?e:t}function o(e){return n[Math.min(n.indexOf(e)+1,5)]}function s({className:t,src:n,alt:r,width:i,height:a}){return e(`img`,{className:t,src:n,alt:r,width:i,height:a,loading:`lazy`,decoding:`async`})}function c({component:n,kind:r,title:i,as:a,eyebrow:o,subtitle:s,align:c,variant:l,actions:u,extraClass:d,className:f,rest:p,children:m}){if(i==null||i===``)throw Error(`${n} needs a title: every section opens with its heading.`);let h=a,g=p.id?`${p.id}-title`:void 0;return e(`section`,{className:[`wui-section`,`wui-section-${r}`,c===`center`?`wui-section-center`:``,l===`muted`?`wui-section-muted`:``,d,f].filter(Boolean).join(` `),"aria-labelledby":g,...p,children:t(`div`,{className:`wui-section-inner`,children:[t(`div`,{className:`wui-section-head`,children:[o!=null&&o!==``&&e(`p`,{className:`wui-section-eyebrow`,children:o}),e(h,{className:`wui-section-title`,id:g,children:i}),s!=null&&s!==``&&e(`p`,{className:`wui-section-subtitle`,children:s}),u!=null&&u!==!1&&e(`div`,{className:`wui-section-actions`,children:u})]}),m]})})}export{r as SECTION_ALIGNS,n as SECTION_HEADINGS,i as SECTION_VARIANTS,s as SectionImage,c as default,o as itemHeading,a as sectionHeading};

package/dist/lib/shortcutChip.js

@@ -0,0 +1 @@
+import{ariaKeyShortcuts as e,shortcutKey as t}from"@webority/ui-elements/helpers";import{jsx as n}from"react/jsx-runtime";function r(e,{inTooltip:r=!1}={}){if(e==null||String(e).trim()===``)return null;let i=t(e);return r?n(`span`,{className:`wui-kbd`,children:i}):n(`kbd`,{className:`wui-kbd`,"aria-hidden":`true`,children:i})}function i(n){if(!(n==null||String(n).trim()===``))return e(t(n))}export{i as shortcutAria,r as shortcutChip};

package/dist/lib/useListShortcuts.js

@@ -0,0 +1 @@
+import{SHORTCUT_SCOPE_ATTRIBUTE as e,runShortcut as t}from"@webority/ui-elements/helpers";import{useEffect as n,useRef as r}from"react";function i(i,{enabled:a=!0,scope:o}={}){let s=r(i);n(()=>{s.current=i}),n(()=>{if(!a)return;let n=o?.current;n&&!n.hasAttribute(e)&&n.setAttribute(e,``);let r=e=>t(e,s.current,o?.current??null);return document.addEventListener(`keydown`,r),()=>document.removeEventListener(`keydown`,r)},[a,o])}export{i as useListShortcuts};

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

@@ -17,6 +17,8 @@
  * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement='auto']  which side the
  *   tooltip prefers. `auto` (default) lets Popper pick the side with the most room; a named side
  *   is preferred but still flips to stay in view. Powered by `AppTooltip`, so it never clips.
+ * @param {string} [props.shortcut]   the key that runs this action ("J", "E", "/"), drawn as a key chip in the tooltip
+ *   after the label. Sets aria-keyshortcuts; the page binds the key itself (useListShortcuts). Needs a `label`, which supplies the tooltip.
  * @param {boolean} [props.danger]   destructive tint
  * @param {boolean} [props.disabled]
  * @param {number} [props.size=20]   glyph size in px; the disc (and its hover tint) scales with it, keeping a constant 8px ring
@@ -28,11 +30,12 @@
  *   wrapper must use `forwardRef` (the tooltip still opens without it, but may be mispositioned).
  * @param {string} [props.href]           sets an anchor without needing `as`.
  */
-export default function AppActionIcon({ icon, iconVariant, label, tooltipPlacement, danger, disabled, size, onClick, className, as, href, ...rest }: {
+export default function AppActionIcon({ icon, iconVariant, label, tooltipPlacement, shortcut, danger, disabled, size, onClick, className, as, href, ...rest }: {
     icon: string | import('react').ReactNode;
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
     label: string;
     tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
+    shortcut?: string;
     danger?: boolean;
     disabled?: boolean;
     size?: number;

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

@@ -6,18 +6,25 @@ import "@webority/ui-elements/elements/autocomplete";
  *   - **static** — pass `options` (`[{ value, label }]`); filtering is client-side.
  *   - **remote** — pass an async `loadOptions(query) => Promise<options>`; the field
  *     debounces typing, shows a spinner while your promise is in flight, then lists the
- *     results. You own the fetch; the component owns the UX.
+ *     results. You own the fetch; the component owns the UX. `options` given alongside it
+ *     are the list shown until the first load result arrives, which replaces them.
  *
  * @param {object} props
  * @param {string} [props.value] Selected option value.
  * @param {(value: string, meta?: { isCustom: boolean }) => void} [props.onChange] The second
  *   argument reports whether the commit was a freeform entry (`allowCustom`) rather than a
  *   listed option — existing callers reading only the first argument are unaffected.
- * @param {{value: string, label: string}[]} [props.options] Static options.
+ * @param {Array<{ value: string, label: import('react').ReactNode }>} [props.options] Static options,
+ *   or with `loadOptions` the initial list: shown before any load result arrives (and resolving a
+ *   pre-filled value's label), then replaced by the first result; later changes are ignored.
+ *   A label may be a node (`<>CO<sub>2</sub></>`): it renders as static markup in the menu, the
+ *   input shows its text once chosen, and filtering and the option's accessible name use that
+ *   text. Remote results from `loadOptions` take string labels only.
  * @param {(query: string, opts?: { signal?: AbortSignal }) => Promise<{value: string, label: string}[]>} [props.loadOptions]
  *   Remote loader; receives an AbortSignal for the superseded request (optional to use).
  * @param {string} [props.placeholder]
  * @param {number} [props.minChars] Min chars before a remote search fires (default 1 in remote mode).
+ *   0 is allowed: opening the field with an empty box calls `loadOptions("")` for the first page.
  * @param {number} [props.debounce] Debounce ms for remote search (default 250).
  * @param {boolean} [props.disabled]
  * @param {'sm'|'lg'} [props.size] Control size around the default.

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

@@ -1,4 +1,4 @@
-export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, className, ...rest }: {
+export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, shortcut, className, ...rest }: {
     [x: string]: any;
     block?: boolean;
     children: any;
@@ -8,6 +8,7 @@ export default function AppButton({ children, variant, size, type, loading, disa
     leftIcon?: any;
     loading?: boolean;
     rightIcon?: any;
+    shortcut: any;
     size?: string;
     static?: boolean;
     tooltip: any;

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

@@ -0,0 +1,23 @@
+/**
+ * Related buttons joined into one control: a view switch, a bulk-action row, a text-style set
+ * ("Bold", "Italic"). The buttons touch, share one outline and keep their own variants and
+ * handlers; give every button in the group the same `variant` and leave `size` to the group.
+ * The group is announced by `label`; each button is still its own tab stop (this is a set of
+ * actions, not a single-choice control; for one choice of several use `AppSegmented`).
+ *
+ * @param {object} props
+ * @param {string} props.label Accessible name for the group ("Text style").
+ * @param {import('react').ReactNode} props.children `AppButton`s (or button-styled links).
+ * @param {'sm'|'md'|'lg'} [props.size='md'] One size for every button in the group.
+ * @param {boolean} [props.vertical=false] Stack the buttons top to bottom.
+ * @param {boolean} [props.fullWidth=false] Fill the container, the buttons sharing the row equally.
+ * @param {string} [props.className]
+ */
+export default function AppButtonGroup({ label, children, size, vertical, fullWidth, className, ...rest }: {
+    label: string;
+    children: import('react').ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    vertical?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,52 @@
+import "@webority/ui-elements/elements/carousel";
+/**
+ * A row of slides you can step through, drag or swipe: previous and next buttons, a dot per page, and
+ * optional auto-advance that can always be stopped. Each child is one slide.
+ *
+ * With `autoplay` it advances every that many milliseconds and shows a visible Pause / Play button
+ * before the slides. It holds while the pointer is over it or focus is inside, while the tab is hidden,
+ * and not at all when the user prefers reduced motion (the button is hidden then). It wraps to the
+ * first slide; the buttons wrap only with `loop`. The slides are named "2 of 5", and the page that
+ * comes into view is announced politely when the user, not the autoplay, moved it. The focused slide
+ * row also takes Left, Right, Home and End.
+ *
+ * `perView` shows several slides at once (its `Md` and `Lg` forms apply from those breakpoints), and
+ * the dots then stand for pages of slides. Wraps the shared `<wui-carousel>` element, which owns the
+ * stepping and the autoplay; the Razor `<app-carousel>` renders the same markup.
+ *
+ * @param {object} props
+ * @param {string} props.label What the slides are ("Customer stories"): the carousel's accessible name.
+ * @param {number} [props.autoplay] Milliseconds between automatic steps (5000 is typical). Omit for none.
+ * @param {boolean} [props.loop=false] The previous and next buttons wrap around at the ends.
+ * @param {number} [props.perView=1] Slides in view on a phone.
+ * @param {number} [props.perViewMd] Slides in view from the md breakpoint. Defaults to `perView`.
+ * @param {number} [props.perViewLg] Slides in view from the lg breakpoint. Defaults to `perViewMd`.
+ * @param {boolean} [props.arrows=true] Show the previous and next buttons.
+ * @param {boolean} [props.dots=true] Show the page dots.
+ * @param {string} [props.previousLabel="Previous slide"] The previous button's name.
+ * @param {string} [props.nextLabel="Next slide"] The next button's name.
+ * @param {string} [props.dotLabel="Go to slide"] The words before the slide number in each dot's name.
+ * @param {string} [props.pauseLabel="Pause"] The pause button's text and name while playing.
+ * @param {string} [props.playLabel="Play"] The pause button's text and name while paused.
+ * @param {string} [props.className]
+ * @param {import('react').CSSProperties} [props.style] Merged after the per-view custom properties.
+ * @param {import('react').ReactNode} props.children The slides.
+ */
+export default function AppCarousel({ label, autoplay, loop, perView, perViewMd, perViewLg, arrows, dots, previousLabel, nextLabel, dotLabel, pauseLabel, playLabel, className, children, style, ...rest }: {
+    label: string;
+    autoplay?: number;
+    loop?: boolean;
+    perView?: number;
+    perViewMd?: number;
+    perViewLg?: number;
+    arrows?: boolean;
+    dots?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    dotLabel?: string;
+    pauseLabel?: string;
+    playLabel?: string;
+    className?: string;
+    style?: import('react').CSSProperties;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import "@webority/ui-elements/elements/overflow";
+/**
+ * A row of chips (`AppChip`, `AppChoiceChip`) that either wraps onto more lines or, with
+ * `overflow="menu"`, keeps one line and moves the chips that do not fit into a More menu
+ * (`<wui-overflow>`, which Razor `<app-chip-group>` renders too). Choosing a chip in the menu
+ * clicks that chip's own control, so a clickable `AppChip` runs its `onClick` and an
+ * `AppChoiceChip` toggles. A chip with no control (static or only removable) is listed greyed out.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children The chips.
+ * @param {"wrap"|"menu"} [props.overflow="wrap"] `wrap` lets the chips wrap; `menu` moves the extras into a More menu.
+ * @param {string} [props.moreLabel="More"] The More button's text when `overflow="menu"`.
+ * @param {string} [props.label] Accessible name for the group.
+ * @param {string} [props.className]
+ */
+export default function AppChipGroup({ children, overflow, moreLabel, label, className, ...rest }: {
+    children: import('react').ReactNode;
+    overflow?: "wrap" | "menu";
+    moreLabel?: string;
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import "@webority/ui-elements/elements/code-block";
+/**
+ * Source code with syntax colours (light and dark), a Copy button with a confirmation, optional
+ * line numbers and optional wrapping, for docs pages, API keys, webhook payloads and request
+ * examples. The colouring is a small built-in tokenizer in `<wui-code-block>`, which Razor
+ * `<app-code-block>` renders too; the source is only ever drawn as text, never as HTML. Source
+ * beyond 100,000 characters is shown uncoloured. Not an editor: it shows code, it does not edit it.
+ *
+ * @param {object} props
+ * @param {string} props.code The source text. A single trailing newline is dropped.
+ * @param {"text"|"json"|"js"|"cs"|"sql"|"bash"|"http"|"html"|"css"} [props.language="text"] What to colour; `text` shows it as written.
+ * @param {boolean} [props.lineNumbers=false] Number the lines. The numbers are not copied or selected.
+ * @param {boolean} [props.wrap=false] Wrap long lines instead of scrolling sideways.
+ * @param {string} [props.label] The header title ("webhook.json") and the code region's accessible name. Without it the header names the language.
+ * @param {string} [props.copyLabel="Copy"] The copy button's label.
+ * @param {string} [props.copiedLabel="Copied"] The copy button's label for two seconds after a copy.
+ * @param {string} [props.className]
+ */
+export default function AppCodeBlock({ code, language, lineNumbers, wrap, label, copyLabel, copiedLabel, className, ...rest }: {
+    code: string;
+    language?: "text" | "json" | "js" | "cs" | "sql" | "bash" | "http" | "html" | "css";
+    lineNumbers?: boolean;
+    wrap?: boolean;
+    label?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -12,6 +12,15 @@ import "@webority/ui-elements/elements/command-palette";
  * You own the search: `query` is controlled, and `groups` is whatever your search returned
  * for it. The palette does not filter. Selecting a result calls its `onSelect`, then `onClose`.
  *
+ * Nested pages are controlled the same way. An item with a `page` opens it instead of acting:
+ * the palette calls `onPathChange` with the new path and `onQueryChange("")`, and you pass the
+ * groups of the page `path` names. A Back button and a breadcrumb appear while the path is not
+ * empty; Backspace in an empty search goes back. Reset `path` yourself when you close the palette.
+ *
+ * With `recentsKey` the palette remembers what was chosen on this device and lists it first, under
+ * "Recent", while the search is empty on the first page. Items are remembered by group key and
+ * item key, so keep both stable, and only items present in the root `groups` are listed again.
+ *
  * @param {object} props
  * @param {boolean} props.open
  * @param {() => void} props.onClose Called on Escape, a backdrop click, and after a selection.
@@ -21,13 +30,28 @@ import "@webority/ui-elements/elements/command-palette";
  * @param {{ key: string, label: import('react').ReactNode, items: { key: string,
  *   label: import('react').ReactNode, description?: import('react').ReactNode,
  *   icon?: string | import('react').ReactNode, meta?: import('react').ReactNode,
- *   disabled?: boolean, ariaLabel?: string, onSelect?: () => void }[] }[]} [props.groups=[]]
+ *   disabled?: boolean, ariaLabel?: string, shortcut?: string,
+ *   page?: { key: string, label: string }, onSelect?: () => void }[] }[]} [props.groups=[]]
  *   Results, rendered in order under their group headings. Keys must be unique within their
  *   group; groups with no items are left out. `icon` is a library icon name or a node; `meta` is
  *   short trailing text or a node. A `disabled` item is listed but cannot be chosen: the arrow
  *   keys skip it. `ariaLabel` is the option's accessible name, by default a string `label`, so a
  *   screen reader reads the name whole rather than in the pieces the search emphasis splits it
  *   into; give it for a label passed as a node. The description and meta describe the option.
+ *   `shortcut` is the key that runs the item elsewhere ("N", "Ctrl K"), drawn as a key chip at
+ *   the end of the row; it is a hint, your page binds the key. `page` makes the item open a
+ *   nested page ({ key, label }, the label shows in the breadcrumb) instead of calling `onSelect`.
+ * @param {{ key: string, label: string }[]} [props.path=[]] The open nested pages, outermost first
+ *   (controlled). Empty shows the first page.
+ * @param {(path: { key: string, label: string }[]) => void} [props.onPathChange] Called with the
+ *   new path when the user opens a page, presses Back, picks a breadcrumb entry, or presses
+ *   Backspace in an empty search. The search is cleared with it.
+ * @param {string} [props.rootLabel='All'] Breadcrumb text for the first page.
+ * @param {string} [props.backLabel='Back'] Accessible name of the Back button.
+ * @param {string} [props.recentsKey] localStorage key to remember chosen items under; omit for no
+ *   recents. Make it per user, for example from the user's public id.
+ * @param {number} [props.recentsLimit=5] How many recent items to keep (at most 20).
+ * @param {string} [props.recentsLabel='Recent'] Heading of the recent items.
  * @param {boolean} [props.loading=false] Shows the library spinner in the input.
  * @param {import('react').ReactNode} [props.emptyText='No results'] Shown when the query is
  *   not blank, nothing is loading, and no group has items.
@@ -38,7 +62,7 @@ import "@webority/ui-elements/elements/command-palette";
  * @param {string} [props.id] Seeds the result and heading ids; defaults to a generated id.
  * @param {string} [props.className] Extra classes on the dialog card.
  */
-export default function AppCommandPalette({ open, onClose, query, onQueryChange, placeholder, groups, loading, emptyText, footer, ariaLabel, highlight, id, className, ...rest }: {
+export default function AppCommandPalette({ open, onClose, query, onQueryChange, placeholder, groups, path, onPathChange, rootLabel, backLabel, recentsKey, recentsLimit, recentsLabel, loading, emptyText, footer, ariaLabel, highlight, id, className, ...rest }: {
     open: boolean;
     onClose: () => void;
     query?: string;
@@ -55,9 +79,27 @@ export default function AppCommandPalette({ open, onClose, query, onQueryChange,
             meta?: import('react').ReactNode;
             disabled?: boolean;
             ariaLabel?: string;
+            shortcut?: string;
+            page?: {
+                key: string;
+                label: string;
+            };
             onSelect?: () => void;
         }[];
     }[];
+    path?: {
+        key: string;
+        label: string;
+    }[];
+    onPathChange?: (path: {
+        key: string;
+        label: string;
+    }[]) => void;
+    rootLabel?: string;
+    backLabel?: string;
+    recentsKey?: string;
+    recentsLimit?: number;
+    recentsLabel?: string;
     loading?: boolean;
     emptyText?: import('react').ReactNode;
     footer?: import('react').ReactNode;

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

@@ -0,0 +1,115 @@
+export type CommentThreadItem = {
+    /**
+     * The comment's public id.
+     */
+    id: string;
+    /**
+     * Who wrote it; `src` is a photo URL.
+     */
+    author: {
+        name: string;
+        src?: string;
+    };
+    /**
+     * When it was written: an ISO instant with its zone, epoch ms or a Date. Shown in IST.
+     */
+    at: string | number | Date;
+    /**
+     * The stored body, with mentions as `@[Label](id)`.
+     */
+    value?: string;
+    /**
+     * Shows "Edited" beside the time.
+     */
+    edited?: boolean;
+    /**
+     * Shows "This comment was deleted." in place of the body; replies stay.
+     */
+    deleted?: boolean;
+    /**
+     * This person may edit it.
+     */
+    canEdit?: boolean;
+    /**
+     * This person may delete it.
+     */
+    canDelete?: boolean;
+    reactions?: {
+        emoji: string;
+        count: number;
+        mine?: boolean;
+    }[];
+    /**
+     * Replies, oldest first. Replies to a reply are not nested.
+     */
+    replies?: CommentThreadItem[];
+};
+/**
+ * A discussion: comments with their author, time in IST, replies one level deep, reactions and
+ * mentions. People reply, edit and delete in place (Delete asks first), react from a small panel,
+ * and write with "@" to mention someone (see `AppMentionInput`). Ctrl or Cmd+Enter sends a box,
+ * Escape closes it and returns focus. Changes are announced to screen readers.
+ *
+ * The comments are yours: each callback persists a change and the thread waits for it, then you
+ * pass the updated `comments` back. Throw (or reject) with a message written for the person and it
+ * shows where they acted. Bodies are stored mention values (`Thanks @[Asha Rao](u-12)`) and always
+ * render as text, never HTML.
+ *
+ * Wraps the shared `<wui-comment-thread>` element, which owns the boxes, keys and states; Razor
+ * `<app-comment-thread>` renders the same markup.
+ *
+ * @typedef {object} CommentThreadItem
+ * @property {string} id The comment's public id.
+ * @property {{ name: string, src?: string }} author Who wrote it; `src` is a photo URL.
+ * @property {string | number | Date} at When it was written: an ISO instant with its zone, epoch ms or a Date. Shown in IST.
+ * @property {string} [value] The stored body, with mentions as `@[Label](id)`.
+ * @property {boolean} [edited] Shows "Edited" beside the time.
+ * @property {boolean} [deleted] Shows "This comment was deleted." in place of the body; replies stay.
+ * @property {boolean} [canEdit] This person may edit it.
+ * @property {boolean} [canDelete] This person may delete it.
+ * @property {{ emoji: string, count: number, mine?: boolean }[]} [reactions]
+ * @property {CommentThreadItem[]} [replies] Replies, oldest first. Replies to a reply are not nested.
+ *
+ * @param {object} props
+ * @param {CommentThreadItem[]} [props.comments] Top-level comments, oldest first.
+ * @param {(body: string) => unknown | Promise<unknown>} [props.onPost] A new comment.
+ * @param {(parentId: string, body: string) => unknown | Promise<unknown>} [props.onReply]
+ * @param {(commentId: string, body: string) => unknown | Promise<unknown>} [props.onEdit]
+ * @param {(commentId: string) => unknown | Promise<unknown>} [props.onDelete]
+ * @param {(commentId: string, emoji: string) => unknown | Promise<unknown>} [props.onReact] Toggle
+ *   this person's reaction.
+ * @param {{ value: string, label: string, description?: string, src?: string }[]} [props.people]
+ *   The people the boxes offer after "@".
+ * @param {(query: string) => Promise<{ value: string, label: string, description?: string, src?: string }[]>} [props.loadPeople]
+ *   Look people up instead of `people`.
+ * @param {string[]} [props.reactionChoices] The reactions the panel offers (default 👍 ❤️ 🎉 😄 👀 🙏).
+ * @param {boolean} [props.readOnly=false] Show the thread without the box, actions or reacting.
+ * @param {string} [props.label="Comments"] The list's accessible name.
+ * @param {string} [props.id] The root's id. Generated when omitted.
+ * @param {string} [props.className] Extra classes on the root.
+ */
+export default function AppCommentThread({ comments, onPost, onReply, onEdit, onDelete, onReact, people, loadPeople, reactionChoices, readOnly, label, id, className, ...rest }: {
+    comments?: CommentThreadItem[];
+    onPost?: (body: string) => unknown | Promise<unknown>;
+    onReply?: (parentId: string, body: string) => unknown | Promise<unknown>;
+    onEdit?: (commentId: string, body: string) => unknown | Promise<unknown>;
+    onDelete?: (commentId: string) => unknown | Promise<unknown>;
+    onReact?: (commentId: string, emoji: string) => unknown | Promise<unknown>;
+    people?: {
+        value: string;
+        label: string;
+        description?: string;
+        src?: string;
+    }[];
+    loadPeople?: (query: string) => Promise<{
+        value: string;
+        label: string;
+        description?: string;
+        src?: string;
+    }[]>;
+    reactionChoices?: string[];
+    readOnly?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -48,14 +48,48 @@
  *   on it, for in-page actions (open a drawer). Same nested-control rule as rowHref.
  * @param {(row: object) => 'success'|'warning'|'danger'|'info'|undefined} [props.rowStatus] A coloured
  *   bar on the row's leading edge, e.g. danger for an overdue invoice. Undefined draws none.
+ * @param {string|number} [props.activeRowKey] The key (what `rowKey` returns) of the row whose record is
+ *   open, e.g. in a detail pane beside the table. That row gets `aria-current="true"` and the subtle
+ *   primary background; it is separate from `rowStatus`'s edge bar and from selected (checkbox) rows.
+ *   Razor: `active-row-key` against each row's `data-row-key`.
  * @param {boolean} [props.selectable=false] Render a leading checkbox column.
  * @param {Set<string|number>} [props.selectedIds] Currently selected row keys.
  * @param {(id: string|number) => void} [props.onToggleRow]
  * @param {(checked: boolean) => void} [props.onToggleAll] Toggle all current rows.
+ * @param {(keys: Array<string|number>, checked: boolean) => void} [props.onSelectRange] Shift+click on a row
+ *   checkbox selects (or clears) every row from the last clicked one to this one; this receives the keys
+ *   of the other rows that change. Without it, `onToggleRow` is called once per key, so it must be safe
+ *   to call several times in a row (a functional state update). Razor: built in.
  * @param {(row: object) => import('react').ReactNode} [props.renderExpanded] When given, each row
  *   gets a leading expand toggle; the returned content renders in a full-width row beneath it.
+ * @param {boolean} [props.resizableColumns=false] Each column but the last gets a handle on its end edge:
+ *   drag it, or focus it and press the arrow keys (Shift for bigger steps, Home or a double-click to
+ *   undo). The table then keeps fixed widths measured from its rows, and the last column takes the rest.
+ *   Razor: `resizable-columns`.
+ * @param {string} [props.viewKey] Remembers resized widths in this browser under this name (the same name
+ *   `useTableView` takes). Razor: `view-key`, with `data-key` on each header cell.
+ * @param {string} [props.groupBy] A column key: rows gather under a header row per value of it, in the
+ *   order each value first appears (sort within groups by sorting `rows`), each header collapsing its
+ *   rows and showing their count. Razor: `group-by`, against the header cells' `data-key`.
+ * @param {(value: unknown, rows: object[]) => import('react').ReactNode} [props.groupLabel] A group
+ *   header's label; without it the value shows as a cell would.
+ * @param {boolean} [props.virtual=false] Renders only the rows in view (plus a margin) for a long
+ *   client-side list. Needs `maxHeight`; rows are taken to share one height, so it is not for
+ *   `renderExpanded` or `stackOnMobile`. Razor: `virtual`.
+ * @param {(row: object) => boolean} [props.rowSaving] True while the row's add or change is on its way to
+ *   the server: the row shows at once, tinted and marked busy, instead of waiting for the answer. Put an
+ *   added row in `rows` straight away with this true (give it its final key if you can, so the outcome is
+ *   announced). Razor: `data-wui-save-state="saving"` on the <tr>, or a server table's `saveRow`.
+ * @param {(row: object) => string|undefined} [props.rowSaveError] Why the row's last save failed: the row
+ *   shows the error look with this line under its first cell. Put a changed row's old values back in `rows`
+ *   as you set it, so the row shows what is really saved; keep a failed added row until the person retries
+ *   or removes it. When a row leaves `rowSaving`, screen readers hear "Ana Rao saved." or "Ana Rao was not
+ *   saved. <reason>" (the name is the first column's value). Razor: `data-wui-save-state="error"`.
+ *
+ * A sort or reorder of up to 200 rows glides each row to its new place; not under reduced motion, and not
+ * on a `virtual` table.
  */
-export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, renderExpanded, density, striped, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, ...rest }: {
+export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, onSelectRange, renderExpanded, density, striped, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, activeRowKey, resizableColumns, viewKey, groupBy, groupLabel, virtual, rowSaving, rowSaveError, ...rest }: {
     columns: object[];
     rows: object[];
     rowKey?: (row: object, index: number) => string | number;
@@ -85,9 +119,18 @@ export default function AppDataTable({ columns, rows, rowKey, sort, onSort, load
     rowHref?: (row: object) => string;
     onRowClick?: (row: object) => void;
     rowStatus?: (row: object) => 'success' | 'warning' | 'danger' | 'info' | undefined;
+    activeRowKey?: string | number;
     selectable?: boolean;
     selectedIds?: Set<string | number>;
     onToggleRow?: (id: string | number) => void;
     onToggleAll?: (checked: boolean) => void;
+    onSelectRange?: (keys: Array<string | number>, checked: boolean) => void;
     renderExpanded?: (row: object) => import('react').ReactNode;
+    resizableColumns?: boolean;
+    viewKey?: string;
+    groupBy?: string;
+    groupLabel?: (value: unknown, rows: object[]) => import('react').ReactNode;
+    virtual?: boolean;
+    rowSaving?: (row: object) => boolean;
+    rowSaveError?: (row: object) => string | undefined;
 }): import("react").JSX.Element;

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

@@ -25,6 +25,11 @@ import "@webority/ui-elements/elements/date-range";
  * @param {'sm'|'md'|'lg'} [props.size] Control height tier, matching AppInput.
  * @param {0|1|2|3|4|5|6} [props.firstDay] First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it
  *   follows the theme's `--wui-first-day` token, which is 1 (Monday) unless the product sets it.
+ * @param {(('today'|'last7Days'|'thisMonth'|'lastMonth'|'thisFinancialYear')|{ label: string, start: string, end: string })[]} [props.presets]
+ *   Quick ranges, listed beside the calendar (above it on a phone); picking one fills the range and
+ *   closes the calendar. An item is a name, resolved against today in IST (`thisFinancialYear` runs
+ *   1 April to 31 March; `thisMonth` and `lastMonth` span the whole month), or `{ label, start, end }`
+ *   with ISO dates. A preset outside `min`/`max` is disabled.
  * @param {string} [props.id]
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className] Class to apply to the control element.

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

@@ -0,0 +1,46 @@
+import "@webority/ui-elements/elements/drawer";
+/**
+ * A panel over the page that is a side drawer from md up and a bottom sheet below it. The sheet
+ * rests on `snapPoints` (percent of the screen height), follows a finger on its handle or header,
+ * flicks to the next point and is dragged down to close; its handle is a vertical slider the arrow
+ * keys, Home and End also move. Focus moves in on open, Tab stays inside, Escape closes, and
+ * focus returns to what opened it. Controlled: set `open` and close it in `onClose`. Distinct from
+ * `AppModal`, which is a centred dialog on every screen. Wraps `<wui-drawer>`, which Razor
+ * `<app-drawer>` renders too. Place it where no ancestor has a transform, since it is fixed to the
+ * viewport.
+ *
+ * @param {object} props
+ * @param {boolean} [props.open=false]
+ * @param {() => void} [props.onClose] Called when the backdrop, Escape, the close button or a drag
+ *   down asks to close it. It stays open until `open` becomes false.
+ * @param {string} [props.title] The heading, and the dialog's accessible name.
+ * @param {string} [props.subtitle] A line under the title.
+ * @param {string} [props.ariaLabel] The dialog's accessible name when there is no `title`.
+ * @param {'end'|'start'} [props.side="end"] Which edge the side drawer slides from.
+ * @param {'sm'|'md'|'lg'} [props.size="md"] The side drawer's width: 360, 480 or 640 px.
+ * @param {number[]} [props.snapPoints=[50, 90]] The sheet's resting heights, each 10 to 100 percent of the screen.
+ * @param {number} [props.defaultSnap=0] Which of the sorted snap points it opens on.
+ * @param {(index: number, percent: number) => void} [props.onSnapChange] Called when the sheet moves to another point.
+ * @param {boolean} [props.dismissible=true] Show the close button.
+ * @param {boolean} [props.staticBackdrop=false] The backdrop, Escape and a drag down no longer close it; only the close button or `open` can.
+ * @param {import('react').ReactNode} [props.footer] Pinned below the scrolling body.
+ * @param {string} [props.className]
+ * @param {import('react').ReactNode} props.children
+ */
+export default function AppDrawer({ open, onClose, title, subtitle, ariaLabel, side, size, snapPoints, defaultSnap, onSnapChange, dismissible, staticBackdrop, footer, className, children, ...rest }: {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+    subtitle?: string;
+    ariaLabel?: string;
+    side?: 'end' | 'start';
+    size?: 'sm' | 'md' | 'lg';
+    snapPoints?: number[];
+    defaultSnap?: number;
+    onSnapChange?: (index: number, percent: number) => void;
+    dismissible?: boolean;
+    staticBackdrop?: boolean;
+    footer?: import('react').ReactNode;
+    className?: string;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

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

@@ -15,8 +15,10 @@
  * @param {string} [props.label] Tooltip + accessible-name fallback for the toggle.
  * @param {"start"|"end"} [props.align="end"] Menu alignment.
  * @param {string} [props.ariaLabel]
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, divider?: true }[]} [props.items]
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: true }[]} [props.items]
  *   `icon` is a glyph name OR a custom node (e.g. an iconsax glyph); `image` is a picture URL (external logo/avatar) — pass one.
+ *   `shortcut` is the key that runs the item ("E"), drawn as a key chip at the end of the row; the
+ *   page binds the key itself (useListShortcuts).
  *   An item with `divider: true` renders a separator instead of an action; it needs no
  *   `label`/`onClick`, just a unique `key`.
  * @param {string} [props.menuClassName]
@@ -53,6 +55,7 @@ export default function AppDropdown({ icon, iconSize, toggleClassName, label, ar
         to?: string;
         onClick?: () => void;
         danger?: boolean;
+        shortcut?: string;
         divider?: true;
     }[];
     menuClassName?: string;

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

@@ -11,6 +11,8 @@
  *
  * @param {object} props
  * @param {string|import('react').ReactNode} props.icon  Semantic icon name for the bubble, or a custom node
+ * @param {"no-results"|"no-data"|"empty-inbox"|"no-notifications"|"no-files"|"no-access"|"offline"|"error"} [props.illustration]
+ *   Decorative drawing by name, in theme colours. Replaces the icon bubble when set.
  * @param {number} [props.iconSize=24]
  * @param {"md"|"sm"} [props.size="md"]
  * @param {import('react').ReactNode} props.title
@@ -19,8 +21,9 @@
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
  */
-export default function AppEmptyState({ icon, iconSize, size, title, text, action, className, style, ...rest }: {
+export default function AppEmptyState({ icon, illustration, iconSize, size, title, text, action, className, style, ...rest }: {
     icon: string | import('react').ReactNode;
+    illustration?: "no-results" | "no-data" | "empty-inbox" | "no-notifications" | "no-files" | "no-access" | "offline" | "error";
     iconSize?: number;
     size?: "md" | "sm";
     title: import('react').ReactNode;