@webority/ui-react 0.53.0 → 0.54.0

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/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;

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

@@ -0,0 +1,20 @@
+/**
+ * One panel of an `AppResizable` group. Its content scrolls inside it. Sizes are percentages of the
+ * room the panels share.
+ *
+ * @param {object} props
+ * @param {number} [props.defaultSize] The starting size in percent. Panels without one share what the sized ones leave.
+ * @param {number} [props.minSize=10] The smallest the person can make it, in percent.
+ * @param {number} [props.maxSize=100] The largest the person can make it, in percent.
+ * @param {import('react').ReactNode} [props.children]
+ * @param {string} [props.className]
+ * @param {import('react').CSSProperties} [props.style]
+ */
+export default function AppResizablePanel({ defaultSize, minSize, maxSize, children, className, style, ...rest }: {
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    children?: import('react').ReactNode;
+    className?: string;
+    style?: import('react').CSSProperties;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import "@webority/ui-elements/elements/rolling-number";
+/**
+ * A figure that rolls its digits to the new value when it changes, instead of jumping: a total, a
+ * count, a cart amount. Indian digit grouping and the rupee sign come from the shared formatters,
+ * and the symbols stay still while the digits move. A screen reader reads the final value as plain
+ * text, once; the rolling digits are hidden from it. Under reduced motion the figure just changes.
+ * The first value never animates. Wraps `<wui-rolling-number>`, which Razor `<app-rolling-number>`
+ * renders too.
+ *
+ * @param {object} props
+ * @param {number} [props.value] The figure. Without a number it shows a hyphen.
+ * @param {'number'|'currency'|'percent'} [props.format="number"] `currency` is rupees (₹12,55,015);
+ *   `percent` takes a ratio (0.125 is 12.5%).
+ * @param {'rupees'|'paise'} [props.unit="rupees"] What `value` counts, for `currency`.
+ * @param {number} [props.decimals] Fraction digits: fixed for `currency` (default 0), the most shown
+ *   for `number` (default 2) and `percent` (default 1).
+ * @param {number} [props.duration=600] How long the roll takes, in milliseconds.
+ * @param {string} [props.className]
+ */
+export default function AppRollingNumber({ value, format, unit, decimals, duration, className, ...rest }: {
+    value?: number;
+    format?: 'number' | 'currency' | 'percent';
+    unit?: 'rupees' | 'paise';
+    decimals?: number;
+    duration?: number;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,24 @@
+/**
+ * The closing band of a public page: a heading, a sentence and the buttons on a soft brand
+ * panel. Renders the same markup as the Razor `<app-section-call-to-action>`.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The section's heading.
+ * @param {import('react').ReactNode} [props.actions] The buttons, usually a primary `AppButton` and an outline one.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h2"] The heading element.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] A sentence under the heading.
+ * @param {"start"|"center"} [props.align="center"] Where the copy and buttons sit in the panel.
+ * @param {"default"|"muted"} [props.variant="default"] The section's background around the panel.
+ * @param {string} [props.className]
+ */
+export default function AppSectionCallToAction({ title, actions, as, eyebrow, subtitle, align, variant, className, ...rest }: {
+    title: import('react').ReactNode;
+    actions?: import('react').ReactNode;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+/**
+ * The questions section of a public page: a heading block over an `AppAccordion` (`children`) in
+ * a reading-width column. Renders the same markup as the Razor `<app-section-faq>`.
+ *
+ * The answers stay in the page while closed, so they are read by search engines. The section
+ * writes no structured data: the page builds its FAQPage from the same list it passes to the
+ * accordion, so the markup and the visible text cannot differ.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The section's heading.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h2"] The heading element.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] A sentence under the heading ("Still stuck? Write to us.").
+ * @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 {string} [props.className]
+ */
+export default function AppSectionFaq({ title, as, eyebrow, subtitle, align, variant, children, className, ...rest }: {
+    title: import('react').ReactNode;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    children?: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;