@webority/ui-react 0.24.0 → 0.26.0

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

@@ -50,6 +50,25 @@
  *   `@webority/ui-elements`, so both surfaces validate identically.
  * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.requirementsPlacement="auto"] Which side the
  *   requirements popover opens; `auto` flips to stay in view.
+ * @param {string} [props.mask] Format the value while it is typed. A named mask
+ *   (`phone-in`, `pan`, `gstin`, `aadhaar`, `ifsc`, `pin-code`, `date` as DD-MM-YYYY, `amount` with
+ *   Indian grouping) or a pattern, where `9` is a digit, `A` a letter, `*` a digit or letter and any
+ *   other character a literal (`"(999) 999-9999"`). Paste is cleaned and re-formatted, Backspace and
+ *   Delete step over literals, and the caret stays put; a keyboard that composes text (an Android IME) is
+ *   left alone until it commits, and a value set from code (react-hook-form `setValue` / `reset`) is
+ *   laid out too. The behaviour is the one `<app-input mask>` runs, from `@webority/ui-elements`. Use
+ *   it on a `text`, `tel`, `search`, `url` or `password` field; any other `type` warns, and an unknown
+ *   mask name warns. A controlled `value` (raw or formatted) is laid out under the mask. `onChange`
+ *   and `onBlur` get an event whose `target.value` is the POSTED value (the raw characters, or ISO
+ *   `yyyy-MM-dd` for `date`), so a controlled field and a zod rule see what the server will see;
+ *   `onInput` sees the field as displayed. react-hook-form's `register` reads the element itself, so
+ *   pair it with `setValueAs: (v) => postedMasked(mask, v)`. A named mask also marks the field invalid
+ *   with a curated message while it is incomplete or wrong, shown as the field's error once the field
+ *   has been left or a submit was tried (an `error` you pass wins).
+ * @param {boolean} [props.postFormatted=false] With a `mask`, a native form submit posts the
+ *   formatted value instead of the raw one (the typed characters without the literals).
+ * @param {(raw: string, formatted: string) => void} [props.onMaskChange] Called with the raw and the
+ *   formatted value whenever the raw value changes.
  * @param {import('react').Ref<HTMLInputElement>} [ref]
  */
 declare const AppInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

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

@@ -0,0 +1,82 @@
+import "@webority/ui-elements";
+/**
+ * A board of columns whose cards move by drag and drop (mouse, pen, or touch after a long press)
+ * or by keyboard (Space picks a card up, Left and Right choose a column, Space drops, Escape
+ * cancels), announced to screen readers at every step.
+ *
+ * Wraps the shared `<wui-kanban>` element in controlled mode: the element runs the drag, the drop
+ * rules, the hatched "not allowed" columns, the remembered collapse and the phone column switcher;
+ * this component owns the cards. A drop calls `onMove`; while its promise is pending the card shows
+ * in its new column with a saving lock, and a rejection puts it back with an error toast (the
+ * rejection's message, so write it for the person who dragged). `onMove` must leave `cards` holding
+ * the new column by the time it settles, or the card goes back to where `cards` says it is. A drop
+ * that needs a decision first (a reason for a lost deal) opens the product's own AppModal from
+ * `onMove` and settles the promise with the modal's outcome.
+ *
+ * Below the md breakpoint the board shows one column per screen with a column switcher above it;
+ * the board scrolls inside itself, so the page never scrolls sideways.
+ *
+ * @param {object} props
+ * @param {{ key: string, title: string, tone?: 'neutral'|'primary'|'info'|'success'|'warning'|'danger',
+ *   href?: string, summary?: import('react').ReactNode | ((cards: object[]) => import('react').ReactNode),
+ *   acceptFrom?: string[], collapsible?: boolean, collapsed?: boolean, emptyText?: string }[]} props.columns
+ *   The columns, left to right. `acceptFrom` lists the only columns this one takes cards from;
+ *   `collapsible` columns fold to a strip, remembered per `boardId`; `collapsed` is the first state.
+ * @param {object[]} props.cards Every card on the board.
+ * @param {(card: object) => import('react').ReactNode} props.renderCard The card's content.
+ * @param {(card: object) => string} [props.getCardKey] Default `card.key ?? card.id`.
+ * @param {(card: object) => string} [props.getCardColumn] Default `card.column`.
+ * @param {(card: object) => number} [props.getCardValue] The number a computed summary adds up.
+ * @param {(card: object) => string} [props.cardLabel] The card's accessible name, used in announcements.
+ * @param {(card: object) => boolean} [props.isCardLocked] A locked card cannot be moved.
+ * @param {(move: { card: object, key: string, from: string, to: string, index: number }) => void | Promise<unknown>} [props.onMove]
+ * @param {(card: object, from: string, to: string) => boolean | string} [props.accept] Refuse a move:
+ *   false, or a string saying why (shown in the column while the card is carried).
+ * @param {(card: object) => boolean} [props.filter] Show only the cards it returns true for; counts follow.
+ * @param {string} [props.boardId] Remembers collapsed columns per browser under this id.
+ * @param {string} [props.ariaLabel='Board'] Accessible name of the board region.
+ * @param {string} [props.emptyText='Nothing here'] Text of an empty column.
+ * @param {boolean} [props.readOnly=false] No card can move.
+ * @param {'number'|'currency'|'compact'} [props.summaryFormat] Each column's summary becomes the sum
+ *   of its visible cards' `getCardValue`, in this format.
+ * @param {'rupees'|'paise'} [props.summaryUnit='rupees'] The unit of the card values.
+ * @param {string} [props.className]
+ * @param {string} [props.id] The board's id; the column, body and help ids derive from it. Generated when omitted.
+ */
+export default function AppKanban({ columns, cards, renderCard, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, summaryFormat, summaryUnit, className, id, ...rest }: {
+    columns: {
+        key: string;
+        title: string;
+        tone?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+        href?: string;
+        summary?: import('react').ReactNode | ((cards: object[]) => import('react').ReactNode);
+        acceptFrom?: string[];
+        collapsible?: boolean;
+        collapsed?: boolean;
+        emptyText?: string;
+    }[];
+    cards: object[];
+    renderCard: (card: object) => import('react').ReactNode;
+    getCardKey?: (card: object) => string;
+    getCardColumn?: (card: object) => string;
+    getCardValue?: (card: object) => number;
+    cardLabel?: (card: object) => string;
+    isCardLocked?: (card: object) => boolean;
+    onMove?: (move: {
+        card: object;
+        key: string;
+        from: string;
+        to: string;
+        index: number;
+    }) => void | Promise<unknown>;
+    accept?: (card: object, from: string, to: string) => boolean | string;
+    filter?: (card: object) => boolean;
+    boardId?: string;
+    ariaLabel?: string;
+    emptyText?: string;
+    readOnly?: boolean;
+    summaryFormat?: 'number' | 'currency' | 'compact';
+    summaryUnit?: 'rupees' | 'paise';
+    className?: string;
+    id?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,50 @@
+/**
+ * A line chart: one numeric series over categorical x labels (months, quarters, attempts).
+ * Hand-drawn SVG, no chart library. The x axis is laid out in percentages and the y axis in
+ * pixels, so the chart fills any width without a resize observer and without scaling its text.
+ * Each point is a focusable button that shows its value on hover and focus; a visually hidden
+ * table carries every value, the band and reference labels included, for screen readers.
+ *
+ * @param {object} props
+ * @param {{ label: string, value: number | null }[]} props.data The series, in x order. Labels must
+ *   be unique. A `null` value leaves a gap in the line.
+ * @param {string} [props.name] The series name, read before each point's value ("Score, Mar: 72").
+ * @param {number} [props.yMin] Fixes the bottom of the y axis. Omitted: taken from the data,
+ *   rounded down to a whole tick.
+ * @param {number} [props.yMax] Fixes the top of the y axis. Omitted: taken from the data,
+ *   rounded up to a whole tick.
+ * @param {{ from: number, to: number, label?: string, tone?: 'neutral'|'info'|'success'|'warning'|'danger' }[]} [props.bands]
+ *   Shaded y ranges behind the line, such as rating bands, each labelled at its top right.
+ * @param {{ value: number, label?: string }[]} [props.referenceLines] Dashed horizontal lines,
+ *   such as a target or a threshold, each labelled at its right end.
+ * @param {(value: number) => string} [props.formatValue] Formats every value the chart prints:
+ *   ticks, tooltips, the data table. Defaults to `String(value)`.
+ * @param {number} [props.height=240] Height of the plot area in px, x labels excluded.
+ * @param {string} [props.title] A visible caption above the chart; also names it for assistive tech.
+ * @param {string} [props.ariaLabel] Names the chart when there is no visible `title`.
+ * @param {string} [props.className]
+ */
+export default function AppLineChart({ data, name, yMin, yMax, bands, referenceLines, formatValue, height, title, ariaLabel, className, ...rest }: {
+    data: {
+        label: string;
+        value: number | null;
+    }[];
+    name?: string;
+    yMin?: number;
+    yMax?: number;
+    bands?: {
+        from: number;
+        to: number;
+        label?: string;
+        tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    }[];
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+    formatValue?: (value: number) => string;
+    height?: number;
+    title?: string;
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -3,11 +3,12 @@ fallback, // node shown when there's no image (e.g. initials)
 name, onPick, // (file) => void — receives a validated File
 onRemove, // () => void — clears the current logo
 loading, // show a spinner + block interaction while the pick is uploading
-disabled, accept, maxSizeMb, overlayIcon, overlayLabel, ariaLabel, label, hint, error, layout, title, subtitle, required, variant, size, shape, className, ...rest }: {
+disabled, accept, maxSizeMb, crop, overlayIcon, overlayLabel, ariaLabel, label, hint, error, layout, title, subtitle, required, variant, size, shape, className, ...rest }: {
     [x: string]: any;
     accept?: string;
     ariaLabel?: string;
     className?: string;
+    crop: any;
     disabled?: boolean;
     error: any;
     fallback: any;

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

@@ -13,8 +13,9 @@
  *   `staticBackdrop` for a forced-choice dialog with no way out but an explicit action.
  * @param {() => void} props.onClose
  * @param {import('react').ReactNode} [props.footer]
- * @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 {'sm'|'md'|'lg'|'xl'|'fullscreen'|number} [props.size='md'] Card width — a preset, an
+ *   exact max-width in px for a custom size, or fullscreen (the whole viewport, header and footer
+ *   pinned).
  * @param {'center'|'top'} [props.placement='center'] Vertical placement of the card —
  *   centred (default) or pinned near the top of the viewport.
  * @param {boolean} [props.hideHeader=false]
@@ -35,7 +36,7 @@ export default function AppModal({ open, eyebrow, title, subtitle, headerIcon, t
     dismissible?: boolean;
     onClose: () => void;
     footer?: import('react').ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'xl' | number;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen' | number;
     placement?: 'center' | 'top';
     hideHeader?: boolean;
     ariaLabel?: string;

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

@@ -0,0 +1,42 @@
+/**
+ * A formatted-text field: a toolbar (bold, italic, inline code, link, headings, lists, quote, code
+ * block, undo, redo) over an editable surface, with the usual keyboard shortcuts. The field is the
+ * shared `<wui-rich-text>` element, the same one the Razor `<app-rich-text>` uses, with its editing
+ * engine loaded the first time an editor mounts: a page without one never downloads it.
+ *
+ * The value is a string in `format`, HTML by default or Markdown. It is always written out from a
+ * fixed set of allowed content (paragraphs, bold, italic, inline code, links, two heading levels,
+ * lists, quotes, code blocks), so pasted or seeded markup outside that set never reaches the value:
+ * a pasted script, style, class or table has nowhere to land. A link may point at http, https,
+ * mailto or tel only. An empty editor is the empty string. Still sanitise on the server: the
+ * browser is not a trust boundary.
+ *
+ * ```jsx
+ * <AppRichText label="Notes" value={notes} onChange={setNotes} hint="Shown on the invoice." />
+ * ```
+ *
+ * `onChange` fires on every edit with the new string. `format` is read when the editor mounts; the
+ * wrapper remounts the editor when it changes, so the value you hold must be in the new format.
+ *
+ * @param {object} props
+ * @param {string} [props.value] The content, in `format`.
+ * @param {(value: string) => void} [props.onChange] Called with the new string on every edit.
+ * @param {'html'|'markdown'} [props.format='html'] What `value` is.
+ * @param {string} [props.placeholder] Shown while the editor is empty.
+ * @param {string} [props.name] Posted under this name with a form.
+ * @param {import('react').ReactNode} [props.label]
+ * @param {string} [props.error]
+ * @param {string} [props.hint]
+ * @param {boolean} [props.required=false] Marks the field required; an empty editor is invalid.
+ * @param {boolean} [props.disabled=false] Locks the editor and keeps it out of the form post.
+ * @param {boolean} [props.readOnly=false] Locks the editor; the value still posts.
+ * @param {string} [props.id]
+ * @param {string} [props.ariaLabel] Accessible name for the editor; defaults to a string `label`.
+ * @param {string} [props.className] Class on the `<wui-rich-text>` element.
+ * @param {string} [props.fieldClassName] Class on the wrapper field div.
+ * @param {import('react').ReactNode} [props.help] Help content shown in an info tip beside the label.
+ * @param {string} [props.helpLabel="More information"] Accessible name for that info tip.
+ * @param {import('react').Ref<HTMLElement>} [ref] The `<wui-rich-text>` element.
+ */
+declare const AppRichText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppRichText;

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

@@ -20,42 +20,154 @@ export type NavItemShape = {
      */
     trailingIcon?: string | import('react').ReactNode;
     /**
-     * The current page — takes the brand tint + aria-current.
+     * Unset: decided from `currentPath`. true / false force it.
      */
     active?: boolean;
+    /**
+     * How `href` is matched against `currentPath` (default prefix).
+     */
+    match?: 'prefix' | 'exact';
+    /**
+     * Extra path prefixes that also make this item the current page.
+     */
+    matchAlso?: string[];
+    /**
+     * Also show this item in the phone bottom tab bar.
+     */
+    tab?: boolean;
+    /**
+     * A shorter label for the tab bar.
+     */
+    tabLabel?: string;
     /**
      * Sub-items — the row becomes an expandable parent.
      */
     children?: NavItemShape[];
 };
-/**
- * @typedef {object} NavItemShape
- * @property {string} [key]
- * @property {string} label
- * @property {string|import('react').ReactNode} [icon] library icon name, or a node, so a
- *   product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
- * @property {string} href
- * @property {import('react').ReactNode} [badge] A count or short status at the row's end.
- * @property {'danger'|'success'|'warning'} [badgeTone] Tints the badge for an alert count.
- * @property {string|import('react').ReactNode} [trailingIcon] A right-aligned secondary glyph (lock, external arrow, new dot).
- * @property {boolean} [active] The current page — takes the brand tint + aria-current.
- * @property {NavItemShape[]} [children] Sub-items — the row becomes an expandable parent.
- */
+export type UserMenuShape = {
+    /**
+     * The person's full name; the avatar's initials come from it.
+     */
+    name: string;
+    /**
+     * A second line: job title or signed-in role.
+     */
+    role?: string;
+    /**
+     * Profile photo URL.
+     */
+    photo?: string;
+    profileHref?: string;
+    /**
+     * Default "My profile".
+     */
+    profileLabel?: string;
+    /**
+     * Sign-out handler (a button).
+     */
+    onLogout?: () => void;
+    /**
+     * Or a URL a sign-out form POSTs to.
+     */
+    logoutAction?: string;
+    /**
+     * Default "Sign out".
+     */
+    logoutLabel?: string;
+    items?: {
+        key: string;
+        label?: string;
+        icon?: string;
+        href?: string;
+        onClick?: () => void;
+        divider?: true;
+    }[];
+};
+export type NotificationsShape = {
+    /**
+     * Unread count on the bell (99+ above 99).
+     */
+    unread?: number;
+    /**
+     * The list; undefined until loaded.
+     */
+    items?: {
+        id?: string;
+        title: string;
+        time?: string;
+        href?: string;
+        read?: boolean;
+        icon?: string;
+    }[];
+    loading?: boolean;
+    /**
+     * Called as the panel opens: load or refresh `items` here.
+     */
+    onOpen?: () => void;
+    /**
+     * Shows "Mark all read".
+     */
+    onMarkAllRead?: () => void;
+    viewAllHref?: string;
+    /**
+     * Default "Notifications".
+     */
+    label?: string;
+    /**
+     * Default "You are all caught up.".
+     */
+    emptyText?: string;
+};
+export type SearchShape = {
+    /**
+     * Controlled text.
+     */
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Suggestion groups; null hides the list.
+     */
+    results?: {
+        label?: string;
+        hits: {
+            title: string;
+            href: string;
+            subtitle?: string;
+            icon?: string;
+        }[];
+    }[] | null;
+    loading?: boolean;
+    /**
+     * A suggestion was picked; preventDefault the event to route yourself.
+     */
+    onSelect?: (hit: object, event: Event) => void;
+    /**
+     * Enter with no suggestion chosen.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * Default "Search"; also the field's accessible name.
+     */
+    placeholder?: string;
+};
 /**
  * The persistent frame every authenticated portal sits inside — a sidebar of
- * navigation, a sticky topbar, the routed content, and an optional footer.
+ * navigation, a sticky topbar, the routed content, an optional footer, and on a phone
+ * a bottom tab bar.
  *
  * Slot-based, not copy-own: what every product shares is the *structure* — the
  * breakpoint the sidebar collapses at, the drawer and its scrim, the 72px topbar,
- * the icon rail. What differs is only the content, which arrives as props. A
- * product that forked this would re-derive the responsive behaviour and drift.
+ * the icon rail, the tab bar. What differs is only the content, which arrives as props.
+ * The Razor `<app-shell>` renders the same markup and classes.
  *
  * Router-agnostic: pass `linkComponent` (react-router's `Link`) and nav items get
- * `to`; without it they render as plain `<a href>`, which is what Razor emits.
+ * `to`; without it they render as plain `<a href>`, which is what Razor emits. Pass
+ * `currentPath` (the router location) to let the shell pick the active item; without it
+ * each item's `active` decides, as before.
  *
  * @param {object} props
  * @param {{ label?: string, items: NavItemShape[] }[]} props.groups Nav groups, in order.
- *   Groups after the first are separated by a rule.
+ *   Groups after the first are separated by a rule. A group left with no items is not rendered.
  * @param {import('react').ReactNode} [props.brand] The logo row at the top of the sidebar.
  * @param {import('react').ReactNode} [props.sidebarStart] Between the brand row and the nav —
  *   a workspace/tenant switcher, an environment badge. Hidden on the collapsed rail.
@@ -65,16 +177,24 @@ export type NavItemShape = {
  *   to keep today's behaviour (nothing in that slot when collapsed).
  * @param {import('react').ReactNode} [props.sidebarFooter] Pinned below the scrolling nav.
  * @param {import('react').ReactNode} [props.topbarStart] Leading topbar slot — page title, crumbs.
- * @param {import('react').ReactNode} [props.topbarEnd] Trailing topbar slot — search, account menu.
+ * @param {import('react').ReactNode} [props.topbarEnd] Trailing topbar slot — page actions; the bell and account menu follow it.
  * @param {import('react').ReactNode} [props.footer]
  * @param {import('react').ReactNode} props.children The routed page.
  * @param {boolean} [props.collapsed] Controlled rail state. Omit to let the shell own it.
  * @param {(collapsed: boolean) => void} [props.onCollapsedChange]
- * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard.
+ * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard. No tab bar either.
  * @param {string} [props.navLabel='Main navigation']
+ * @param {string} [props.currentPath] The current location; items without `active` are matched against it.
+ * @param {boolean} [props.rememberCollapsed=false] Remember the uncontrolled rail state in a cookie.
+ * @param {string} [props.collapsedCookie='wui-shell-collapsed'] The cookie `rememberCollapsed` uses.
+ * @param {string} [props.tabBarLabel='Quick navigation'] Accessible name of the phone tab bar.
+ * @param {string} [props.moreLabel='More'] Label of the tab bar button that opens the drawer.
+ * @param {UserMenuShape} [props.userMenu] The account menu at the end of the topbar.
+ * @param {NotificationsShape} [props.notifications] The notification bell.
+ * @param {SearchShape} [props.search] The topbar search.
  * @param {string} [props.className]
  */
-export default function AppShell({ groups, brand, sidebarStart, sidebarStartCompact, sidebarFooter, topbarStart, topbarEnd, footer, children, collapsed, onCollapsedChange, noSidebar, navLabel, linkComponent: Link, className, ...rest }: {
+export default function AppShell({ groups, brand, sidebarStart, sidebarStartCompact, sidebarFooter, topbarStart, topbarEnd, footer, children, collapsed, onCollapsedChange, noSidebar, navLabel, linkComponent: Link, currentPath, rememberCollapsed, collapsedCookie, tabBarLabel, moreLabel, userMenu, notifications, search, className, ...rest }: {
     groups: {
         label?: string;
         items: NavItemShape[];
@@ -91,5 +211,13 @@ export default function AppShell({ groups, brand, sidebarStart, sidebarStartComp
     onCollapsedChange?: (collapsed: boolean) => void;
     noSidebar?: boolean;
     navLabel?: string;
+    currentPath?: string;
+    rememberCollapsed?: boolean;
+    collapsedCookie?: string;
+    tabBarLabel?: string;
+    moreLabel?: string;
+    userMenu?: UserMenuShape;
+    notifications?: NotificationsShape;
+    search?: SearchShape;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import "@webority/ui-elements";
+/**
+ * A list whose items the person reorders: drag with a mouse or a finger (the list scrolls when
+ * the pointer nears its edge), or with the keyboard (focus an item's handle, Space to lift,
+ * arrow keys to move, Space to drop, Escape to cancel). Every move is announced to screen readers.
+ * Thin wrapper over the shared `<wui-sortable>` element; the list is controlled, so `items`
+ * is the truth and `onReorder` reports the new order.
+ *
+ * Lists that share a `group` accept each other's items by pointer drag. Each list then reports
+ * its own new order, so the parent moves the item from one `items` array to the other.
+ *
+ * @param {object} props
+ * @param {{ id: string, label: string, content?: import('react').ReactNode, disabled?: boolean }[]} props.items
+ *   `id` is what `onReorder` reports. `label` names the item to assistive tech (handle label and
+ *   announcements) and is the visible text unless `content` is given. A `disabled` item cannot
+ *   be picked up; other items can still move past it.
+ * @param {(ids: string[], detail: object) => void} [props.onReorder] Called with this list's new
+ *   id order after a drop. `detail` is the element's event detail: `{ id, fromIndex, toIndex, from, to }`.
+ * @param {string} props.ariaLabel Names the list for assistive tech; also used in announcements
+ *   when an item moves between lists.
+ * @param {boolean} [props.handle=false] Drag only from the handle. Without it an item can also be
+ *   dragged from its body (links, buttons and inputs inside it keep working).
+ * @param {string} [props.group] Name shared by lists that accept each other's items.
+ * @param {string} [props.name] Form field name; posts the order as one hidden input per item.
+ * @param {boolean} [props.disabled] No item can be picked up.
+ * @param {'vertical'|'horizontal'} [props.orientation='vertical'] Direction the items run;
+ *   horizontal also covers a wrapping row.
+ * @param {string} [props.className]
+ * @param {import('react').Ref<HTMLElement>} [ref]
+ */
+declare const AppSortableList: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppSortableList;

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

@@ -0,0 +1,24 @@
+/**
+ * A small inline trend line: no axes, no tooltip, no chart engine. Drawn as plain SVG, so a
+ * table cell or a tile can hold one without loading anything. It is a picture of a trend, so it
+ * carries a text alternative that says where the line starts and ends. Pass your own `aria-label` to replace it,
+ * or `aria-hidden="true"` when the figure sits beside the trend in text.
+ *
+ * ```jsx
+ * <AppSparkline data={[12, 15, 14, 19]} label="Signups" />
+ * ```
+ *
+ * @param {object} props
+ * @param {number[]} props.data The values, in order. A value that is not a finite number (null, NaN, a string) is left out, and a series with none left draws nothing.
+ * @param {string} [props.label] What the trend measures; it starts the text alternative ("Signups trend from 12 to 19 across 4 points.").
+ * @param {number} [props.width=48] Width in px.
+ * @param {number} [props.height=16] Height in px.
+ * @param {string} [props.className] Extra classes on the svg.
+ */
+export default function AppSparkline({ data, label, width, height, className, ...rest }: {
+    data: number[];
+    label?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -1,8 +1,19 @@
+/**
+ * Status pill. Decoupled: the caller supplies the display `label` + `tone` (an app maps
+ * its own status enum to these); the library owns only the presentation. Renders an
+ * em-dash when there is no label.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} [props.label]
+ * @param {string} [props.tone] Tone class suffix (e.g. success | warning | danger | info | neutral).
+ * @param {string} [props.className]
+ * @param {string} [props.tooltip] A collision-aware hover/focus tooltip (via AppTooltip / Popper) — flips to stay on-screen. Useful to spell out a terse status pill's full meaning.
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] Preferred tooltip side; `auto` picks the side with the most room.
+ */
 export default function AppStatusBadge({ label, tone, className, tooltip, tooltipPlacement, ...rest }: {
-    [x: string]: any;
-    className?: string;
-    label: any;
+    label?: import('react').ReactNode;
     tone?: string;
-    tooltip: any;
-    tooltipPlacement: any;
+    className?: string;
+    tooltip?: string;
+    tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
 }): any;

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

@@ -0,0 +1,44 @@
+import "@webority/ui-elements";
+/**
+ * Thin React wrapper over the shared `<wui-tree>` element: a hierarchy in the WAI-ARIA tree
+ * pattern (arrow keys, Home/End, typeahead, Enter), with icons and badges, lazy children and an
+ * optional single or checkbox selection. The Razor `<app-tree-view>` renders the same element.
+ *
+ * `nodes` is `{ id, label, icon?, badge?, badgeTone?, children?, hasChildren?, expanded?,
+ * checked?, disabled? }[]`. `icon` is a library icon name and `badgeTone` an AppBadge tone. Ids are
+ * strings, unique across the whole tree. `children: []` is a leaf; `hasChildren: true` with no
+ * `children` is a node whose children are fetched the first time it opens, through `loadChildren`
+ * (or `loadUrl`). Labels are plain text. The tree keeps what the user opened and what it
+ * fetched when `nodes` is replaced with the same ids.
+ *
+ * Selection: `single` marks one row selected; `multiple` shows a tri-state checkbox per node (a
+ * parent is checked, unchecked or mixed from its children, and checking it checks every loaded
+ * child). `checked` is controlled by the ids it lists, parents included.
+ *
+ * @param {object} props
+ * @param {{ id: string, label: string, icon?: string, badge?: string,
+ *   badgeTone?: 'neutral'|'primary'|'success'|'warning'|'danger'|'info', children?: object[],
+ *   hasChildren?: boolean, expanded?: boolean, checked?: boolean, disabled?: boolean }[]} props.nodes
+ * @param {'none'|'single'|'multiple'} [props.selection='none']
+ * @param {string|null} [props.selected] Selected id (single mode, controlled: the tree shows this id
+ *   whatever the user clicks until you change it; `null` selects nothing, and dropping the prop clears it).
+ * @param {(id: string, node: object) => void} [props.onSelect] A row was activated: clicked, or
+ *   Enter / Space on it. `node` is the object you passed in.
+ * @param {string[]} [props.checked] Checked ids (multiple mode, controlled).
+ * @param {(ids: string[], detail: { id: string, checked: boolean }) => void} [props.onCheck] A
+ *   check was toggled; `ids` is every checked id.
+ * @param {(node: object) => Promise<object[]>} [props.loadChildren] Fetches a lazy node's children.
+ * @param {string} [props.loadUrl] Children endpoint used when `loadChildren` is not set: a GET with
+ *   `parentId=<id>` added, answering a JSON array of nodes.
+ * @param {(id: string, message: string) => void} [props.onLoadError] Children could not be loaded.
+ * @param {string} [props.name] Form field name: `multiple` posts one value per checked id, `single`
+ *   the selected id.
+ * @param {string} [props.loadingText='Loading'] Announced while children load.
+ * @param {string} [props.errorText='Could not load. Try again.'] Announced when they fail.
+ * @param {string} [props.ariaLabel] Accessible name of the tree.
+ * @param {string} [props.id]
+ * @param {string} [props.className]
+ * @param {import('react').Ref<HTMLElement>} [ref]
+ */
+declare const AppTreeView: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppTreeView;

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

@@ -1,7 +1,5 @@
 export declare const FULL_VARIANT_GLYPHS: {
     aave: string;
-    add: string;
-    "add-circle": string;
     "add-square": string;
     additem: string;
     airdrop: string;
@@ -45,9 +43,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-down-3": string;
     "arrow-forward": string;
     "arrow-forward-square": string;
-    "arrow-left-2": string;
     "arrow-left-3": string;
-    "arrow-right-2": string;
     "arrow-right-3": string;
     "arrow-rotate-left": string;
     "arrow-rotate-right": string;
@@ -56,7 +52,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-square-left": string;
     "arrow-square-right": string;
     "arrow-square-up": string;
-    "arrow-swap-horizontal": string;
     "arrow-swap-vertical": string;
     "arrow-up-2": string;
     "arrow-up-3": string;

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

@@ -1,13 +1,9 @@
 export declare const FULL_VARIANT_GLYPHS: {
-    cake: string;
-    "calendar-1": string;
     "calendar-2": string;
-    "calendar-add": string;
     "calendar-circle": string;
     "calendar-edit": string;
     "calendar-remove": string;
     "calendar-search": string;
-    "calendar-tick": string;
     call: string;
     "call-add": string;
     "call-calling": string;
@@ -55,9 +51,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "clipboard-close": string;
     "clipboard-export": string;
     "clipboard-import": string;
-    "clipboard-text": string;
-    "clipboard-tick": string;
-    "close-circle": string;
     "close-square": string;
     "cloud-add": string;
     "cloud-change": string;
@@ -72,9 +65,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "cloud-remove": string;
     "cloud-snow": string;
     "cloud-sunny": string;
-    code: string;
     "code-1": string;
-    "code-circle": string;
     coffee: string;
     coin: string;
     "coin-1": string;
@@ -93,7 +84,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "copy-success": string;
     copyright: string;
     courthouse: string;
-    cpu: string;
     "cpu-charge": string;
     "cpu-setting": string;
     "creative-commons": string;