@webority/ui-react 0.85.1 → 0.86.1

package/dist/lib/sectionShell.js

@@ -1 +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};
+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(`div`,{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/types/components/AppAccordion.d.ts

@@ -10,6 +10,7 @@
  * @param {object} props
  * @param {{ key?: string, title: import('react').ReactNode, content: import('react').ReactNode, open?: boolean }[]} props.items
  * @param {boolean} [props.multiple=false] Allow more than one pane open at a time.
+ * @param {string[]} [props.openItems] The keys of the items that are open. When set, it replaces each item's own open flag, and it is read again whenever its content changes. With multiple false only the first key opens.
  * @param {string} [props.id] Prefix for the generated pane ids. Set it when a pane
  *   needs a stable anchor to deep-link to; otherwise a unique one is generated.
  * @param {string} [props.className]
@@ -22,6 +23,7 @@ export default function AppAccordion(props: {
         open?: boolean;
     }[];
     multiple?: boolean;
+    openItems?: string[];
     id?: string;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -22,7 +22,7 @@
  *   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
+ * @param {number} [props.size=20]   glyph size in px; a numeric string is read as a number. The disc (and its hover tint) scales with it, keeping a constant 8px ring
  * @param {() => void} [props.onClick]
  * @param {string} [props.className]
  * @param {React.ElementType} [props.as]  render as something else — a router `Link`, `"a"`. When a

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

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

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

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

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

@@ -33,6 +33,7 @@ import "@webority/ui-elements/elements/consent-banner";
  * @param {Array<"analytics"|"functional"|"marketing">} [props.categories=['analytics','functional','marketing']] The optional categories to show. Essential always shows. A category left out has no row, saves as off and is never granted by Accept all.
  * @param {"bottom-left"|"bottom-right"|"bar"} [props.position='bottom-left'] The corner it pins to, or the full-width bar. bar is a slim full-width bar along the bottom at every width.
  * @param {boolean} [props.standalone=false] Render sealed in a shadow root with bundled styles, for a page that does not load `@webority/theme`.
+ * @param {boolean} [props.preview=false] Draw the banner open without reading or saving consent, for a design surface that never ran initConsent. Nothing is stored.
  * @param {string} [props.className] Extra classes on the element.
  * @param {import('react').CSSProperties} [props.style] Inline style; lands on the element with `className`.
  */
@@ -47,6 +48,7 @@ export default function AppConsentBanner(props: {
     categories?: Array<"analytics" | "functional" | "marketing">;
     position?: "bottom-left" | "bottom-right" | "bar";
     standalone?: boolean;
+    preview?: boolean;
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

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

@@ -13,9 +13,10 @@
  * @param {(key: string) => void} [props.onSort]
  * @param {boolean} [props.loading=false]
  * @param {number} [props.skeletonRows=5]
- * @param {import('react').ReactNode} [props.empty]
- * @param {import('react').ReactNode} [props.emptyFiltered]
- * @param {number} [props.sourceCount]
+ * @param {import('react').ReactNode} [props.empty] Shown when there are no rows and the source is empty (`sourceCount` 0), or no `emptyFiltered` is given.
+ * @param {import('react').ReactNode} [props.emptyFiltered] Shown when there are no rows and `sourceCount` is unset or above 0.
+ * @param {number} [props.sourceCount] The number of rows before filtering. 0 means the source is empty and `empty` shows;
+ *   unset means the table was filtered.
  * @param {(row: object) => import('react').ReactNode} [props.rowActions]
  * @param {string} [props.rowActionsLabel]
  * @param {object} [props.pagination] The footer's state, usually straight from usePagination:
@@ -31,6 +32,7 @@
  * @param {'comfortable'|'cozy'|'compact'} [props.density='comfortable'] Row height: 54 / 48 / 40px.
  *   compact is one line per row (the identity subline is hidden). An avatar with no size of its own
  *   follows the density (32 / 28 / 24px).
+ * @param {'auto'|'fixed'} [props.tableLayout='auto'] fixed holds every column to its width or minWidth and clips overflowing text; auto sizes columns to their content.
  * @param {boolean} [props.striped=false] Alternate-row shading in place of divider lines.
  * @param {boolean} [props.flush=false] No wrapper padding above the column header row.
  * @param {boolean} [props.rowDrag=false] Rows drag onto page elements marked data-wui-drop-target; a ticked row drags the whole selection. Fires wui:row-drop ({ keys, target }) on the wrap. Razor: row-drag.
@@ -116,6 +118,7 @@ export default function AppDataTable(props: {
     className?: string;
     wrapperClassName?: string;
     density?: 'comfortable' | 'cozy' | 'compact';
+    tableLayout?: 'auto' | 'fixed';
     striped?: boolean;
     flush?: boolean;
     rowDrag?: boolean;

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

@@ -1,3 +1,4 @@
+import "@webority/ui-elements/file-viewer";
 declare const AppFileViewer: import("react").ForwardRefExoticComponent<{
     src: string;
     name?: string;

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

@@ -1,17 +1,19 @@
 /**
  * Form row — a grid of input columns, responsive.
  *
- * Wraps form fields in a CSS grid with configurable columns (1, 2, or 3).
- * Automatically collapses to 1 column below the md breakpoint. Uses theme gap
+ * Wraps form fields in a CSS grid with configurable columns (1 to 12).
+ * Automatically collapses to 1 column below the md breakpoint unless `collapse` is false. Uses theme gap
  * tokens for consistent field spacing.
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children Field components (AppInput, AppSelect, etc.).
- * @param {1|2|3} [props.columns=2] Number of columns.
+ * @param {1|2|3|4|5|6|7|8|9|10|11|12} [props.columns=2] Number of columns, 1 to 12.
+ * @param {boolean} [props.collapse=true] Stack to one column below the md breakpoint; false keeps the set columns at every width.
  * @param {string} [props.className]
  */
 export default function AppFormRow(props: {
     children: import('react').ReactNode;
-    columns?: 1 | 2 | 3;
+    columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    collapse?: boolean;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -34,7 +34,7 @@ export declare function registerIcons(map: Record<string, (props: {
  * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement='auto'] Preferred tooltip
  *   side; `auto` picks the side with the most room.
  * @param {string} [props.className]
- * @param {string} [props.color]
+ * @param {string} [props.color] The icon colour. Without it the icon takes --wui-icon-color when an ancestor sets that variable, else the inherited text colour.
  * @param {object} [props.style]
  */
 export default function AppIcon(props: {

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,8 @@
  * (which is a card/section "nothing here yet") — this is a self-contained result panel
  * with a prominent status, heading, supporting message, and usually one or two actions.
  *
+ * The card lays its parts in a column, so a `gap` style on it spaces them.
+ *
  * The `status` prop picks a default icon + tone. Numeric statuses (403, 404, 500) render the
  * code as a large figure instead of an icon.
  *

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

@@ -14,6 +14,7 @@
  * @param {"start"|"center"} [props.align="center"] Where the heading block sits.
  * @param {"default"|"muted"} [props.variant="default"] The section's background.
  * @param {import('react').ReactNode} [props.children] The `AppAccordion` of questions.
+ * @param {number[]} [props.openItems] The positions of the questions that start open, counted from 0. They are passed to the AppAccordion among the children.
  * @param {string} [props.className]
  */
 export default function AppSectionFaq(props: {
@@ -24,5 +25,6 @@ export default function AppSectionFaq(props: {
     align?: "start" | "center";
     variant?: "default" | "muted";
     children?: import('react').ReactNode;
+    openItems?: number[];
     className?: string;
 }): import("react").JSX.Element;

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

@@ -11,7 +11,7 @@
  * @param {object} props
  * @param {import('react').ReactNode} props.title The page's heading.
  * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h1"] The heading element. Keep one h1 per page.
- * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading: any node, including a styled container drawn as a pill.
  * @param {import('react').ReactNode} [props.subtitle] One or two sentences under the heading.
  * @param {"start"|"center"} [props.align="start"] Centred copy with the media under it.
  * @param {"default"|"muted"} [props.variant="default"] The section's background.

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

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

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

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

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

@@ -9,10 +9,11 @@
  *
  * @param {object} props
  * @param {number} props.page 1-based.
- * @param {number} props.totalPages
+ * @param {number} [props.totalPages] Page count. Wins over `total` when given.
+ * @param {number} [props.total] Total rows across all pages. Used when totalPages is not given: pages = ceil(total / pageSize).
  * @param {number} props.pageSize
- * @param {(page: number) => void} props.onPageChange
- * @param {(size: number) => void} props.onPageSizeChange
+ * @param {(page: number) => void} [props.onPageChange]
+ * @param {(size: number) => void} [props.onPageSizeChange]
  * @param {number[]} [props.pageSizes]
  * @param {'numbered'|'prev-next'} [props.mode='numbered'] numbered (default) puts windowed page
  *   buttons (first/last plus an ellipsis over any run of hidden pages) between the arrows.
@@ -23,10 +24,11 @@
  */
 export default function AppTablePagination(props: {
     page: number;
-    totalPages: number;
+    totalPages?: number;
+    total?: number;
     pageSize: number;
-    onPageChange: (page: number) => void;
-    onPageSizeChange: (size: number) => void;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
     pageSizes?: number[];
     mode?: 'numbered' | 'prev-next';
     showPageSize?: boolean;

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

@@ -12,7 +12,7 @@ declare const AppTimePicker: import("react").ForwardRefExoticComponent<{
     min?: string;
     max?: string;
     step?: number;
-    format?: '12' | '24';
+    format?: '12' | '24' | 12 | 24;
     placeholder?: string;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';

package/dist/types/components/iconCatalogFull/bold/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    bolt: string;
     book: string;
     "book-1": string;
     "book-saved": string;

package/dist/types/components/iconCatalogFull/broken/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    bolt: string;
     book: string;
     "book-1": string;
     "book-saved": string;

package/dist/types/components/iconCatalogFull/bulk/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    bolt: string;
     book: string;
     "book-1": string;
     "book-saved": string;

package/dist/types/components/iconCatalogFull/linear/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    bolt: string;
     book: string;
     "book-1": string;
     "book-saved": string;

package/dist/types/components/iconCatalogFull/outline/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    bolt: string;
     book: string;
     "book-1": string;
     "book-saved": string;

package/dist/types/components/iconCatalogFull/twotone/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    bolt: string;
     book: string;
     "book-1": string;
     "book-saved": string;

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

@@ -15,6 +15,7 @@ export declare const GLYPHS: {
     "arrow-up": string;
     "arrow-up-right": string;
     "badge-check": string;
+    ban: string;
     bell: string;
     book: string;
     "box-seam": string;
@@ -106,6 +107,7 @@ export declare const GLYPHS: {
     image: string;
     inbox: string;
     info: string;
+    "info-circle": string;
     instagram: string;
     kanban: string;
     key: string;
@@ -113,6 +115,7 @@ export declare const GLYPHS: {
     "layout-dashboard": string;
     "layout-grid": string;
     lightbulb: string;
+    linkedin: string;
     list: string;
     lock: string;
     "lock-1": string;
@@ -127,6 +130,7 @@ export declare const GLYPHS: {
     "message-square": string;
     "message-text": string;
     minus: string;
+    "minus-circle": string;
     mobile: string;
     monitor: string;
     moon: string;
@@ -163,10 +167,12 @@ export declare const GLYPHS: {
     "share-2": string;
     shield: string;
     "shield-check": string;
+    "shield-cross": string;
     "shield-lock": string;
     "shield-plus": string;
     "shield-tick": string;
     shop: string;
+    snowflake: string;
     sort: string;
     sparkles: string;
     star: string;