@webority/ui-react 0.53.1 → 0.55.0

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

@@ -10,6 +10,12 @@
  * and clears itself. The controls, chips and Clear all share one row, the search box wider and
  * selects and date ranges narrow; it wraps only when full, and each facet takes its own line on a phone.
  *
+ * Only the first `inline` facets sit in the row. The rest go in a panel behind a "Filters (n)" button,
+ * n counting the active ones among them (no number while none is active); their chips stay in the row.
+ * The panel is a `<details>` that closes on an outside click or Escape. On a phone every facet folds
+ * into that one button and the panel becomes a sheet from the bottom edge. The button and Clear all
+ * never wrap.
+ *
  * @param {object} props
  * @param {{ key: string, label: string, type: 'enum'|'multiEnum'|'dateRange'|'text',
  *   options?: { value: string, label: string }[] }[]} props.facets `options` fills an `enum` or `multiEnum`;
@@ -17,9 +23,10 @@
  * @param {Record<string, string|string[]|{ from: string, to: string }>} props.value The current filters.
  * @param {(key: string, value: string|string[]|{ from: string, to: string }) => void} props.onChange
  *   Called with the facet key and its new value. Clear all calls it once per active facet, with the empty value.
+ * @param {number} [props.inline=3] How many facets stay in the row; the rest fold into the Filters button.
  * @param {string} [props.className]
  */
-export default function AppFilterBar({ facets: allFacets, value, onChange, className, ...rest }: {
+export default function AppFilterBar({ facets: allFacets, value, onChange, inline, className, ...rest }: {
     facets: {
         key: string;
         label: string;
@@ -37,5 +44,6 @@ export default function AppFilterBar({ facets: allFacets, value, onChange, class
         from: string;
         to: string;
     }) => void;
+    inline?: number;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import "@webority/ui-elements/elements/hover-card";
+/**
+ * A small preview card that opens beside a name or record link: who someone is, a record's status,
+ * without opening the record. It opens after `openDelay` ms of mouse hover or when the trigger takes
+ * keyboard focus, and closes `closeDelay` ms after the pointer or focus leaves the trigger and the
+ * card (the pointer can cross into the card to read or click inside it). Escape closes it. Touch
+ * never opens it, so the trigger must itself lead to the same information (a link to the record).
+ * Distinct from `AppPopover` (opened by a click, for a panel of actions) and `AppTooltip` (one line of
+ * text, no interactive content). Wraps `<wui-hover-card>`, which Razor `<app-hover-card>` renders too.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.trigger The name or link the card belongs to. Make it a link
+ *   or button so keyboard users can focus it.
+ * @param {import('react').ReactNode} [props.children] The card's content. The card is phrasing content, so it can
+ *   sit on a name inside a sentence; there, build the content from spans (a `<div>` cannot be inside a `<p>`).
+ * @param {boolean} [props.loading=false] Shows a spinner and `loadingLabel` in place of the children while
+ *   the preview is fetched; open the fetch from `onOpenChange`.
+ * @param {string} [props.loadingLabel="Loading"] The text beside the spinner.
+ * @param {string} [props.label] The card's accessible name ("Asha Verma, profile").
+ * @param {number} [props.openDelay=300] Milliseconds of hover or focus before it opens.
+ * @param {number} [props.closeDelay=150] Milliseconds after leaving before it closes.
+ * @param {(open: boolean) => void} [props.onOpenChange] Called when the card opens or closes.
+ * @param {string} [props.className]
+ */
+export default function AppHoverCard({ trigger, children, loading, loadingLabel, label, openDelay, closeDelay, onOpenChange, className, ...rest }: {
+    trigger: import('react').ReactNode;
+    children?: import('react').ReactNode;
+    loading?: boolean;
+    loadingLabel?: string;
+    label?: string;
+    openDelay?: number;
+    closeDelay?: number;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import "@webority/ui-elements/elements/datepicker";
+import "@webority/ui-elements/elements/select";
+/**
+ * One value edited where it is shown: a table cell or a fact on a detail page. It reads as plain
+ * text with a pencil on hover and focus; a click or Enter turns it into the matching library control
+ * (a text or number input, a textarea, a select or a date picker, whose list opens at once).
+ *
+ * Enter saves a text or number, Ctrl or Cmd+Enter a textarea, picking saves a select or date, and
+ * leaving the control saves whatever it holds; Escape cancels. An unchanged value closes without
+ * saving. While `onSave` runs the new value shows with a spinner, then a tick for two seconds; a
+ * rejection puts the old value back and shows the rejection's message under it (so write it for the
+ * person editing), and the next edit starts from the value that failed. Saved and failed are
+ * announced to screen readers.
+ *
+ * Inside an `AppDataTable` row that opens on click or Enter, clicks and keys on the value never
+ * reach the row.
+ *
+ * Wraps the shared `<wui-inline-edit>` element, which owns the editing, the keys and the states;
+ * the Razor `<app-inline-edit>` renders the same markup.
+ *
+ * @param {object} props
+ * @param {string | number | null} [props.value] The saved value. A date is `yyyy-MM-dd`; a select
+ *   value is one of the `options` values.
+ * @param {(next: string | number | null) => void | Promise<unknown>} [props.onSave] Persist the new
+ *   value. A number field passes a number (null when cleared); the others pass a string. Reject to
+ *   refuse it: the rejection's message is shown.
+ * @param {'text'|'number'|'select'|'date'|'textarea'} [props.type='text'] The control it turns into.
+ * @param {{ value: string | number, label: string }[]} [props.options] The choices of a select.
+ * @param {string} props.label What the value is ("Owner"): the accessible name of the value and
+ *   the control, and the subject of what screen readers hear ("Owner saved.").
+ * @param {string} [props.placeholder] Shown, muted, when there is no value, and in the empty
+ *   control. Without it an empty value shows a hyphen.
+ * @param {(next: string | number | null) => string | null | undefined} [props.validate] Checked
+ *   before saving: return a message to keep the control open with that message, or nothing to save.
+ * @param {(value: string | number | null) => import('react').ReactNode} [props.renderValue] How a
+ *   saved, non-empty value reads (a formatted amount, a status badge). Text and markup only: the
+ *   value is a button, so it must not hold its own controls or links.
+ * @param {boolean} [props.disabled=false] Show the value without the edit affordance.
+ * @param {string} [props.className] Extra classes on the root element.
+ * @param {string} [props.id] The root's id; the control and error ids derive from it. Generated when omitted.
+ */
+export default function AppInlineEdit({ value, onSave, type, options, label, placeholder, validate, renderValue, disabled, className, id, ...rest }: {
+    value?: string | number | null;
+    onSave?: (next: string | number | null) => void | Promise<unknown>;
+    type?: 'text' | 'number' | 'select' | 'date' | 'textarea';
+    options?: {
+        value: string | number;
+        label: string;
+    }[];
+    label: string;
+    placeholder?: string;
+    validate?: (next: string | number | null) => string | null | undefined;
+    renderValue?: (value: string | number | null) => import('react').ReactNode;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+/**
+ * A field with add-ons attached to it: text before or after the value ("₹", "https://", ".com", "kg")
+ * or a button or select beside it (Copy, Apply, a unit picker). The add-ons share the field's outline
+ * and height. Put one label-less field inside (`AppInput`, `AppSelect`) and give the group the
+ * `label`, tied to the field by `htmlFor` (the field's `id`). For a unit that is only text inside the
+ * field use `AppInput`'s `unit`, `prefix` or `suffix`; this is for add-ons that are their own control
+ * or that must sit outside the field. Razor counterpart: `<app-input-group>`, whose rich add-ons are
+ * the `<app-input-group-leading>` and `<app-input-group-trailing>` children.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children The field.
+ * @param {import('react').ReactNode} [props.leading] Before the field: text, or a node such as an `AppButton`.
+ * @param {import('react').ReactNode} [props.trailing] After the field.
+ * @param {string} [props.label] The group's label, above it.
+ * @param {string} [props.htmlFor] The `id` of the field the label names.
+ * @param {boolean} [props.required=false] Marks the label required.
+ * @param {'sm'|'md'|'lg'} [props.size='md'] Height of text add-ons; set the same size on the field and on button add-ons.
+ * @param {string} [props.className]
+ */
+export default function AppInputGroup({ children, leading, trailing, label, htmlFor, required, size, className, ...rest }: {
+    children: import('react').ReactNode;
+    leading?: import('react').ReactNode;
+    trailing?: import('react').ReactNode;
+    label?: string;
+    htmlFor?: string;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+/**
+ * A key label: the `.wui-kbd` chip a shortcut is drawn with, for prose, help text and hand-built
+ * hints ("Press Esc to close"). Written the way the `shortcut` prop on `AppButton`, `AppTooltip`
+ * and `AppDropdown` items writes a key: one character in upper case, `esc` as Esc, `slash` as /,
+ * anything longer ("Ctrl K") as written. Unlike those chips it is part of the text, so assistive
+ * tech reads it; to bind a key, put `shortcut` on the control instead.
+ *
+ * @param {object} props
+ * @param {string|number} props.children The key: "K", "Enter", "Ctrl K".
+ * @param {string} [props.className]
+ */
+export default function AppKbd({ children, className, ...rest }: {
+    children: string | number;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import "@webority/ui-elements/elements/lightbox";
+/**
+ * A gallery of thumbnails that open full screen: click one and the image fills the screen with
+ * zoom, previous and next, a caption and an optional download. Use it for photo galleries and
+ * image attachments that would otherwise open in a new tab.
+ *
+ * Keys: Left and Right change image (wrapping), + and - zoom, 0 resets the zoom, Escape closes and
+ * puts focus back on the thumbnail of the image last shown. On a touch screen, swipe sideways to
+ * change image, pinch or double tap to zoom, drag to pan, and tap beside the image to close.
+ * A click with Ctrl, Cmd or Shift still opens the image's own link. The behaviour is the shared
+ * `<wui-lightbox>` element, which Razor `<app-lightbox>` renders too.
+ *
+ * @param {object} props
+ * @param {{ src: string, thumb?: string, alt?: string, caption?: string, name?: string, key?: string }[]} props.items
+ *   The images. `src` is the full image, `thumb` the thumbnail (default: `src`), `alt` its text
+ *   alternative (default: the caption), `caption` the line under it in the full-screen view and
+ *   `name` the file name a download saves under (default: the last part of `src`).
+ * @param {boolean} [props.download=false] Shows a download action. A browser ignores `name` for an
+ *   image on another origin.
+ * @param {string} [props.label="Image viewer"] The full-screen dialog's name for screen readers.
+ * @param {(index: number) => void} [props.onChange] Called with the position (from 0) of the
+ *   image shown, when the view opens and each time it changes.
+ * @param {() => void} [props.onClose] Called when the full-screen view closes.
+ * @param {string} [props.className]
+ */
+export default function AppLightbox({ items, download, label, onChange, onClose, className, ...rest }: {
+    items: {
+        src: string;
+        thumb?: string;
+        alt?: string;
+        caption?: string;
+        name?: string;
+        key?: string;
+    }[];
+    download?: boolean;
+    label?: string;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+import "@webority/ui-elements/elements/mention-input";
+/**
+ * A text box where "@" opens a list of people to mention. Up and Down choose, Enter or Tab
+ * mention, Escape closes the list; the person reads "@Asha Rao" in the text. Typing inside a
+ * mention turns it back into plain text, and Backspace just after one removes it whole.
+ *
+ * The value is plain text with each mention stored as `@[Asha Rao](u-12)`: never HTML, so it can
+ * be saved and shown anywhere without escaping worries. Show a saved value with `AppCommentThread`,
+ * or read it with `parseMentionValue` and `mentionedIds` from `@webority/ui-elements/elements/mention-input`
+ * (the server's twin is `MentionText` in Webority.Ui.Razor).
+ *
+ * Wraps the shared `<wui-mention-input>` element; Razor `<app-mention-input>` renders the same box.
+ *
+ * @param {object} props
+ * @param {string} [props.value] The stored value (`Thanks @[Asha Rao](u-12)`).
+ * @param {(value: string, meta: { mentions: { id: string, label: string }[] }) => void} [props.onChange]
+ *   Called on every edit with the stored value and the people it mentions, each once.
+ * @param {{ value: string, label: string, description?: string, src?: string }[]} [props.people]
+ *   The people to offer. `value` is the person's public id (letters, digits, `_ . : -`).
+ * @param {(query: string, opts?: { signal?: AbortSignal }) => Promise<{ value: string, label: string, description?: string, src?: string }[]>} [props.loadPeople]
+ *   Look people up as the person types after "@" (instead of `people`).
+ * @param {number} [props.minChars=1] How many letters after "@" before `loadPeople` runs.
+ * @param {number} [props.debounce=250] Milliseconds to wait for typing to pause before `loadPeople` runs.
+ * @param {() => void} [props.onSubmit] Ctrl or Cmd+Enter in the box (send a comment).
+ * @param {number} [props.rows=3] Visible lines.
+ * @param {string} [props.placeholder]
+ * @param {boolean} [props.disabled=false]
+ * @param {string} [props.name] Posts the stored value under this name in a form.
+ * @param {string} [props.id] The element's id; the text box is `{id}-text`, the label's target.
+ * @param {import('react').ReactNode} [props.label] Shown above the box; a string also names it.
+ * @param {string} [props.error]
+ * @param {string} [props.hint]
+ * @param {boolean} [props.required=false]
+ * @param {import('react').ReactNode} [props.help] Help content in an info tip beside the label.
+ * @param {string} [props.helpLabel="More information"] Accessible name for that info tip.
+ * @param {string} [props.className] Extra classes on the element.
+ * @param {string} [props.fieldClassName] Extra classes on the field wrapper.
+ * @param {import('react').Ref<HTMLElement>} [ref] The `<wui-mention-input>` element.
+ */
+declare const AppMentionInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppMentionInput;

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

@@ -0,0 +1,45 @@
+import "@webority/ui-elements/elements/menubar";
+/**
+ * An application menubar (File, Edit, View) whose menus open on click and on the arrow keys. The
+ * bar is one tab stop: Left and Right move across the menus, Down and Up open one, Right opens a
+ * submenu, Escape closes a level and Tab leaves; a letter jumps to the next row starting with it.
+ * Once a menu is open, pointing at another menu opens it instead. A row can carry a `shortcut`
+ * hint, drawn as a key chip at its end; like `AppDropdown` it only shows and announces the key, the
+ * page binds it. The behaviour is the shared `<wui-menubar>` element, the same one the Razor
+ * `<app-menubar>` uses. For a site's top navigation with dropdown panels use `AppNavigationMenu`.
+ *
+ * NOTE: the exported component must stay the FIRST destructured function in this file —
+ * the parity check reads the first signature it finds as the component's public props.
+ *
+ * @param {object} props
+ * @param {{ key: string, label: string, disabled?: boolean, items: { key: string, label?: string, icon?: string|import('react').ReactNode, to?: string, onClick?: () => void, shortcut?: string, danger?: boolean, disabled?: boolean, divider?: true, items?: object[] }[] }[]} props.menus
+ *   The menus, left to right. A row is an action (`onClick`) or a link (`to`); `items` makes it a
+ *   submenu opener (`onClick` and `to` are then ignored); `divider: true` is a separator and needs
+ *   only a unique `key`. `icon` is a glyph name or a node. A `disabled` row is listed but skipped by
+ *   the arrow keys and cannot be chosen.
+ * @param {string} [props.ariaLabel='Application menu'] Accessible name of the bar.
+ * @param {import('react').ElementType} [props.linkComponent] Component for `to` rows (e.g. Link).
+ * @param {string} [props.className]
+ */
+export default function AppMenubar({ menus, ariaLabel, linkComponent, className, ...rest }: {
+    menus: {
+        key: string;
+        label: string;
+        disabled?: boolean;
+        items: {
+            key: string;
+            label?: string;
+            icon?: string | import('react').ReactNode;
+            to?: string;
+            onClick?: () => void;
+            shortcut?: string;
+            danger?: boolean;
+            disabled?: boolean;
+            divider?: true;
+            items?: object[];
+        }[];
+    }[];
+    ariaLabel?: string;
+    linkComponent?: import('react').ElementType;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -17,7 +17,10 @@ import "@webority/ui-elements/elements/multiselect";
  * @param {object} props
  * @param {string[]} [props.values] Selected option values.
  * @param {(values: string[]) => void} [props.onChange]
- * @param {{value: string, label: string, description?: string, avatar?: string, initials?: string, disabled?: boolean, disabledHint?: string}[]} [props.options]
+ * @param {Array<{ value: string, label: import('react').ReactNode, description?: string, avatar?: string, initials?: string, disabled?: boolean, disabledHint?: string }>} [props.options]
+ *   The choices. A label may be a node (`<>CO<sub>2</sub></>`): it renders as static markup in the
+ *   menu and on the chosen chip, and search, typeahead and the accessible names (the option and the
+ *   chip's remove button) use its text.
  * @param {string} [props.placeholder]
  * @param {string} [props.searchPlaceholder] Placeholder for the in-menu search box.
  * @param {boolean} [props.searchable=true] Ignored under `allowCustom`, whose inline input is the search.

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

@@ -0,0 +1,41 @@
+import "@webority/ui-elements/elements/navigation-menu";
+/**
+ * A site's top navigation with dropdown panels. An entry is a link (`to`) or a button that opens a
+ * panel of `links`, each with an optional description. A panel opens on a click, Enter, Space or
+ * Down on its button, never on hover alone; Tab walks the links in page order, Left and Right move
+ * along the entries, Escape closes the panel and returns focus to its button, and so does choosing
+ * a link or clicking out. One panel is open at a time, and one that would leave the screen aligns
+ * to the end of its entry. Below `md` the entries stack and a panel opens in the page flow. The
+ * behaviour is the shared `<wui-navigation-menu>` element, the same one the Razor
+ * `<app-navigation-menu>` uses. For an application menubar (File, Edit) use `AppMenubar`.
+ *
+ * NOTE: the exported component must stay the FIRST destructured function in this file —
+ * the parity check reads the first signature it finds as the component's public props.
+ *
+ * @param {object} props
+ * @param {{ key: string, label: string, to?: string, current?: boolean, links?: { key: string, label: string, to: string, description?: string, icon?: string|import('react').ReactNode, current?: boolean }[] }[]} props.items
+ *   The entries, left to right. An entry with `links` is a button that opens them; without, it is a
+ *   link to `to`. `current` marks the page the visitor is on (`aria-current="page"`).
+ * @param {string} [props.ariaLabel='Main'] Accessible name of the navigation landmark.
+ * @param {import('react').ElementType} [props.linkComponent] Component for `to` links (e.g. Link).
+ * @param {string} [props.className]
+ */
+export default function AppNavigationMenu({ items, ariaLabel, linkComponent, className, ...rest }: {
+    items: {
+        key: string;
+        label: string;
+        to?: string;
+        current?: boolean;
+        links?: {
+            key: string;
+            label: string;
+            to: string;
+            description?: string;
+            icon?: string | import('react').ReactNode;
+            current?: boolean;
+        }[];
+    }[];
+    ariaLabel?: string;
+    linkComponent?: import('react').ElementType;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,81 @@
+import "@webority/ui-elements/elements/notification-center";
+export type NotificationItem = {
+    /**
+     * Stable id; names the item to `onItemClick` and to the server.
+     */
+    id: string;
+    /**
+     * The one line that says what happened.
+     */
+    title: string;
+    /**
+     * A second, quieter line.
+     */
+    text?: string;
+    /**
+     * The record the item opens. Without it the item is a button.
+     */
+    href?: string;
+    /**
+     * When it happened: an ISO date-time with its zone ("2026-10-11T14:05:00+05:30")
+     * or a "YYYY-MM-DD" day. It sets the day group and the time shown, in India Standard Time.
+     */
+    at: string;
+    /**
+     * Already read: no dot, regular weight.
+     */
+    read?: boolean;
+    /**
+     * A library icon name, drawn before the text.
+     */
+    icon?: string;
+};
+/**
+ * @typedef {object} NotificationItem
+ * @property {string} id Stable id; names the item to `onItemClick` and to the server.
+ * @property {string} title The one line that says what happened.
+ * @property {string} [text] A second, quieter line.
+ * @property {string} [href] The record the item opens. Without it the item is a button.
+ * @property {string} at When it happened: an ISO date-time with its zone ("2026-10-11T14:05:00+05:30")
+ *   or a "YYYY-MM-DD" day. It sets the day group and the time shown, in India Standard Time.
+ * @property {boolean} [read] Already read: no dot, regular weight.
+ * @property {string} [icon] A library icon name, drawn before the text.
+ */
+/**
+ * A bell with an unread count that opens a panel of notifications grouped by day (Today, Yesterday,
+ * then 04-Oct-2026), each with an unread dot, a link to its record and a "Mark all read" action.
+ * For a portal's own notifications; the topbar bell of `AppShell` (`notifications`) is the same idea
+ * fed from a server fragment. Pass `items` newest first.
+ *
+ * Read state is yours: mark items read in `onItemClick` and `onMarkAllRead`, then pass the new
+ * `items`. The panel opens and closes on its own: the bell, Escape (focus returns to the bell), a
+ * press or focus outside, and the arrow keys, Home and End between items, through
+ * `<wui-notification-center>`, which Razor `<app-notification-center>` renders too.
+ *
+ * @param {object} props
+ * @param {NotificationItem[]} props.items Newest first.
+ * @param {number} [props.unread] The badge count when it is larger than the items listed (the latest
+ *   twenty of 120). Defaults to the number of unread items.
+ * @param {string} [props.label="Notifications"] The bell's name and the panel heading.
+ * @param {string} [props.emptyText="You are all caught up."] Shown when there are no items.
+ * @param {string} [props.viewAllHref] A "View all" link under the list. Absent: no link.
+ * @param {boolean} [props.defaultOpen=false] Start with the panel open; the element owns it after that.
+ * @param {string|number|Date} [props.now] The clock for Today and Yesterday; the current time by default.
+ * @param {() => void} [props.onMarkAllRead] Called by "Mark all read". Absent: no button.
+ * @param {(item: NotificationItem, event: import('react').MouseEvent) => void} [props.onItemClick] Called when an item is chosen, before its link is followed.
+ * @param {(open: boolean) => void} [props.onOpenChange] Called when the panel opens or closes.
+ * @param {string} [props.className]
+ */
+export default function AppNotificationCenter({ items, unread, label, emptyText, viewAllHref, defaultOpen, now, onMarkAllRead, onItemClick, onOpenChange, className, ...rest }: {
+    items: NotificationItem[];
+    unread?: number;
+    label?: string;
+    emptyText?: string;
+    viewAllHref?: string;
+    defaultOpen?: boolean;
+    now?: string | number | Date;
+    onMarkAllRead?: () => void;
+    onItemClick?: (item: NotificationItem, event: import('react').MouseEvent) => void;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+import "@webority/ui-elements/elements/onboarding-checklist";
+/**
+ * A first-run setup checklist: a short list of steps with the progress so far, each step linking to
+ * where it is done. A step is `done`, `current` (the one to do next), `skipped` or `todo`; with none
+ * marked current, the first step to do is. The head shows "2 of 4 done" and a bar of one segment per
+ * step. The heading collapses the steps, the close icon dismisses the whole checklist to a single
+ * "Show setup checklist" button, and a checklist whose every step is done or skipped starts collapsed.
+ *
+ * It keeps its own collapsed and dismissed state after the first render (`defaultCollapsed`,
+ * `defaultDismissed`); `onDismiss`, `onRestore` and `onCollapsedChange` report changes. With
+ * `storageKey` a dismissal is remembered in the browser. Wraps `<wui-onboarding-checklist>`, which
+ * Razor `<app-onboarding-checklist>` renders too.
+ *
+ * @param {object} props
+ * @param {{ key?: string, label: string, description?: string, href?: string, status?: 'done'|'current'|'skipped'|'todo' }[]} props.steps
+ *   The steps in order. `href` makes the label a link to where the step is done; `status` defaults to `todo`.
+ * @param {string} [props.title="Get started"] The heading, and the name of the progress bar.
+ * @param {boolean} [props.defaultCollapsed] Whether the steps start collapsed. Defaults to whether every step is done or skipped.
+ * @param {boolean} [props.defaultDismissed=false] Whether the checklist starts dismissed, showing only the restore button.
+ * @param {string} [props.storageKey] Remembers a dismissal across visits under this key (one per checklist). Unset, it lasts the page.
+ * @param {string} [props.dismissLabel="Dismiss checklist"] The name and tooltip of the close icon.
+ * @param {string} [props.restoreLabel="Show setup checklist"] The text of the button that brings a dismissed checklist back.
+ * @param {() => void} [props.onDismiss] Called when the checklist is dismissed.
+ * @param {() => void} [props.onRestore] Called when a dismissed checklist is brought back.
+ * @param {(collapsed: boolean) => void} [props.onCollapsedChange] Called when the heading collapses or expands the steps.
+ * @param {import('react').ElementType} [props.linkComponent] Router link for a step with an `href`; it receives `to` instead of `href`.
+ * @param {string} [props.className]
+ */
+export default function AppOnboardingChecklist({ steps, title, defaultCollapsed, defaultDismissed, storageKey, dismissLabel, restoreLabel, onDismiss, onRestore, onCollapsedChange, linkComponent: Link, className, ...rest }: {
+    steps: {
+        key?: string;
+        label: string;
+        description?: string;
+        href?: string;
+        status?: 'done' | 'current' | 'skipped' | 'todo';
+    }[];
+    title?: string;
+    defaultCollapsed?: boolean;
+    defaultDismissed?: boolean;
+    storageKey?: string;
+    dismissLabel?: string;
+    restoreLabel?: string;
+    onDismiss?: () => void;
+    onRestore?: () => void;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    linkComponent?: import('react').ElementType;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+import "@webority/ui-elements/elements/rating";
+/**
+ * A star rating: an input that takes a whole number from 1 to `max` (arrow keys move and choose,
+ * it posts with its form), or with `readOnly` a display for a list or a card. The display names
+ * its value to a screen reader ("4.5 out of 5") and, with `half`, draws half stars. Wraps
+ * `<wui-rating>`, which Razor `<app-rating>` renders too.
+ *
+ * As an input it is a labelled radiogroup laid out like any other field. Leave `value` out to
+ * let it hold its own value (`defaultValue` seeds it).
+ *
+ * @param {object} props
+ * @param {number} [props.value] The rating (controlled as an input). A display may hold a fraction such as 4.3; an input rounds to a whole star.
+ * @param {number} [props.defaultValue] Initial rating of an uncontrolled input.
+ * @param {(value: number) => void} [props.onChange] Called with the chosen rating (input only).
+ * @param {number} [props.max=5] How many stars.
+ * @param {boolean} [props.readOnly=false] A display, not an input.
+ * @param {boolean} [props.half=false] Display only: draw the value to the nearest half star.
+ * @param {boolean} [props.showValue=false] Display only: print the number beside the stars.
+ * @param {"sm"|"md"|"lg"} [props.size="md"]
+ * @param {import('react').ReactNode} [props.label] Input: the visible group label and its name. Display: prefix of the spoken text ("Quality: 4.5 out of 5"); a string.
+ * @param {string} [props.name] Input only: the form field name. Defaults to a generated one.
+ * @param {boolean} [props.required=false] Input only.
+ * @param {boolean} [props.disabled=false] Input only.
+ * @param {string} [props.error] Input only: message below the stars. Replaces the hint.
+ * @param {string} [props.hint] Input only: helper text below the stars.
+ * @param {string} [props.id]
+ * @param {string} [props.className] Class on the stars (the control).
+ * @param {string} [props.fieldClassName] Input only: class on the `.field` wrapper.
+ */
+export default function AppRating({ value, defaultValue, onChange, max, readOnly, half, showValue, size, label, name, required, disabled, error, hint, id, className, fieldClassName, ...rest }: {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    readOnly?: boolean;
+    half?: boolean;
+    showValue?: boolean;
+    size?: "sm" | "md" | "lg";
+    label?: import('react').ReactNode;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    id?: string;
+    className?: string;
+    fieldClassName?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+import "@webority/ui-elements/elements/record-pager";
+/**
+ * Moves between the records of a list without going back to it: "12 of 47" and previous and next
+ * action icons, for a detail page's header (`AppPageHeader` `actions`) or a reading pane's header
+ * (`AppSplitView` draws one for its open item). Distinct from `AppPagination` and
+ * `AppTablePagination`, which move between pages of a list.
+ *
+ * Each direction is a link (`prevHref`, `nextHref`), a handler (`onPrev`, `onNext`) or both (the
+ * handler runs on the link's click and may prevent it). A direction with neither, or at either end,
+ * is disabled. With `keys`, J presses next and K previous, ignored in fields and when the page has
+ * single-key shortcuts off; leave it off where a list already owns J and K (a split view). Wraps
+ * `<wui-record-pager>`, which Razor `<app-record-pager>` renders too.
+ *
+ * @param {object} props
+ * @param {number} [props.index] The position of this record, from 1. Without it (nothing open) the
+ *   label is empty and both icons are disabled.
+ * @param {number} [props.total] How many records the list holds.
+ * @param {string} [props.prevHref] The previous record's URL.
+ * @param {(event: import('react').MouseEvent) => void} [props.onPrev] Called on previous.
+ * @param {string} [props.nextHref] The next record's URL.
+ * @param {(event: import('react').MouseEvent) => void} [props.onNext] Called on next.
+ * @param {string} [props.prevLabel="Previous"] The previous icon's name and tooltip ("Previous invoice").
+ * @param {string} [props.nextLabel="Next"] The next icon's name and tooltip ("Next invoice").
+ * @param {boolean} [props.keys=false] J and K press next and previous.
+ * @param {string} [props.className]
+ */
+export default function AppRecordPager({ index, total, prevHref, onPrev, nextHref, onNext, prevLabel, nextLabel, keys, className, ...rest }: {
+    index?: number;
+    total?: number;
+    prevHref?: string;
+    onPrev?: (event: import('react').MouseEvent) => void;
+    nextHref?: string;
+    onNext?: (event: import('react').MouseEvent) => void;
+    prevLabel?: string;
+    nextLabel?: string;
+    keys?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+/**
+ * A moment in plain words ("5 minutes ago", "in 2 hours") that keeps itself current, with the
+ * exact IST time on hover ("04-Oct-2026 14:05 IST"). A week or more away it reads as the date
+ * (04-Oct-2026). Renders a `<time>`, so the machine-readable value stays in the page. Wraps
+ * `<wui-relative-time>`, which Razor `<app-relative-time>` renders too.
+ *
+ * @param {object} props
+ * @param {string|number|Date} props.value The moment: an ISO string sent with its zone ("Z" or an
+ *   offset), epoch milliseconds, or a Date. A bare "2026-10-04" is midnight IST. A missing or
+ *   unreadable value shows "-" and no tooltip.
+ * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement='auto'] Preferred side of the exact-time tooltip.
+ * @param {string} [props.className]
+ */
+export default function AppRelativeTime({ value, tooltipPlacement, className, ...rest }: {
+    value: string | number | Date;
+    tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
+    className?: string;
+}): any;

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

@@ -0,0 +1,30 @@
+import "@webority/ui-elements/elements/resizable";
+export declare const ResizableDirection: import("react").Context<string>;
+/**
+ * A group of panels the person resizes: drag a handle with a mouse, pen or finger, or focus it and
+ * press the arrow keys (5%, Shift 20%), Home and End (the panel before it to its minimum or maximum),
+ * or double click to restore the default sizes. Put an `AppResizableHandle` between each pair of
+ * `AppResizablePanel`s: a reading pane beside a list, an editor above its preview, two sides of a compare.
+ *
+ * Sizes are percentages of the room the panels share and always add up to 100; a panel without a
+ * `defaultSize` shares what the sized ones leave. With `storageKey` the layout is remembered per
+ * screen in the browser; a stored layout that no longer fits the panels is ignored. A vertical group
+ * stacks its panels and needs a height: set `--wui-resizable-height` through `style`, or give its
+ * parent one. Wraps `<wui-resizable>`, which Razor `<app-resizable>` renders too.
+ *
+ * @param {object} props
+ * @param {'horizontal'|'vertical'} [props.direction='horizontal'] `horizontal` puts the panels side by
+ *   side, `vertical` stacks them.
+ * @param {string} [props.storageKey] Remember the sizes under this name (one per screen).
+ * @param {(sizes: number[]) => void} [props.onChange] Called with every panel's size in percent after a
+ *   drag, key press or reset that changed the layout, not while a drag is still moving.
+ * @param {import('react').ReactNode} [props.children] `AppResizablePanel`s with an `AppResizableHandle` between each pair.
+ * @param {string} [props.className]
+ */
+export default function AppResizable({ direction, storageKey, onChange, children, className, ...rest }: {
+    direction?: 'horizontal' | 'vertical';
+    storageKey?: string;
+    onChange?: (sizes: number[]) => void;
+    children?: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * The draggable divider between two `AppResizablePanel`s. It is a keyboard-focusable separator
+ * (arrow keys, Home, End) that resizes the panel before it against the panel after it; its current
+ * size and limits are announced to assistive technology.
+ *
+ * @param {object} props
+ * @param {string} [props.label='Resize panels'] Its accessible name; say what it resizes ("Resize the list").
+ * @param {string} [props.className]
+ */
+export default function AppResizableHandle({ label, className, ...rest }: {
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;