@webority/ui-react 0.88.1 → 0.89.0

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

@@ -1,5 +1,6 @@
 import "@webority/ui-elements/elements/sortable";
 declare const AppSortableList: import("react").ForwardRefExoticComponent<{
+    /** The items, in the order shown. Each has an id, a label and optionally content and a disabled flag. */
     items: {
         id: string;
         label: string;
@@ -7,12 +8,31 @@ declare const AppSortableList: import("react").ForwardRefExoticComponent<{
         disabled?: boolean;
     }[];
     onReorder?: (ids: string[], detail: object) => void;
+    /** Names the list for assistive tech; also used in announcements when an item moves between lists. */
     ariaLabel: string;
+    /**
+     * Drag only from the handle. Without it an item can also be dragged from its body (links, buttons and inputs inside it keep working).
+     * @default false
+     */
     handle?: boolean;
+    /** Name shared by lists that accept each other's items. */
     group?: string;
+    /** Form field name; posts the order as one hidden input per item. */
     name?: string;
+    /**
+     * No item can be picked up.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Direction the items run; horizontal also covers a wrapping row.
+     * @default "vertical"
+     */
     orientation?: 'vertical' | 'horizontal';
+    /**
+     * Extra class names for the list element.
+     * @default ""
+     */
     className?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppSortableList;

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

@@ -9,16 +9,30 @@
  * ```
  *
  * @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.
+ * @param {number[]} props.data
+ * @param {string} [props.label]
+ * @param {number} [props.width]
+ * @param {number} [props.height]
+ * @param {string} [props.className]
  */
 export default function AppSparkline(props: {
+    /** 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. */
     data: number[];
+    /** What the trend measures; it starts the text alternative. */
     label?: string;
+    /**
+     * Width in px.
+     * @default 48
+     */
     width?: number;
+    /**
+     * Height in px.
+     * @default 16
+     */
     height?: number;
+    /**
+     * Extra classes on the svg.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -6,13 +6,24 @@
  * placeholder reads better than a spinner above the fold.
  *
  * @param {object} props
- * @param {'sm'|'md'|number} [props.size='md'] A preset, or an exact diameter in px — pass any
- *   positive number so the spinner matches whatever it sits in; the border scales with it.
- * @param {string} [props.label='Loading'] Accessible name.
+ * @param {'sm'|'md'|number} [props.size]
+ * @param {string} [props.label]
  * @param {string} [props.className]
  */
 export default function AppSpinner(props: {
+    /**
+     * A preset (sm or md), or an exact diameter in px; the border scales with it. Pass any positive number so the spinner matches what it sits in.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | number;
+    /**
+     * Accessible name.
+     * @default "Loading"
+     */
     label?: string;
+    /**
+     * Extra class names for the spinner element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -11,22 +11,39 @@
  * style with `variant` (a sweeping bar, a spinning ring, or bouncing dots).
  *
  * @param {object} props
- * @param {import('react').ReactNode} [props.logo] Brand mark — an `<img>` or an SVG.
- * @param {string} [props.initials] Fallback mark when there is no logo.
- * @param {string} [props.text] One line, e.g. "Signing you in…".
- * @param {string} [props.subtext] A quieter second line under the text.
- * @param {'bar'|'ring'|'dots'} [props.variant='bar'] The indeterminate boot indicator.
- * @param {'sm'|'md'|'lg'|number} [props.size='md'] Mark size — a preset or an exact px diameter.
- * @param {string} [props.label='Loading'] Accessible name for the live region.
+ * @param {import('react').ReactNode} [props.logo]
+ * @param {string} [props.initials]
+ * @param {string} [props.text]
+ * @param {string} [props.subtext]
+ * @param {'bar'|'ring'|'dots'} [props.variant]
+ * @param {'sm'|'md'|'lg'|number} [props.size]
+ * @param {string} [props.label]
  * @param {string} [props.className]
  */
 export default function AppSplash(props: {
+    /** The brand mark, an image or an SVG. It takes the place of the initials. */
     logo?: import('react').ReactNode;
+    /** The fallback mark shown when there is no logo. */
     initials?: string;
+    /** One line of text under the mark, for example Signing you in. */
     text?: string;
+    /** A quieter second line under the text. */
     subtext?: string;
+    /**
+     * The indeterminate boot indicator: a sweeping bar, a spinning ring or bouncing dots. Boot has no measurable percentage, so the indicator never shows progress.
+     * @default "bar"
+     */
     variant?: 'bar' | 'ring' | 'dots';
+    /**
+     * The mark size, a preset or an exact diameter in px. The presets are 44, 56 and 72 px.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg' | number;
+    /**
+     * The accessible name for the live region.
+     * @default "Loading"
+     */
     label?: string;
+    /** Extra classes on the root. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -7,25 +7,26 @@
  * by `label`. Razor counterpart: `<app-split-button>` with `<app-split-button-item>` children.
  *
  * @param {object} props
- * @param {string} props.label The main button's text, also the group's accessible name.
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: true }[]} [props.items]
- *   The menu, as `AppDropdown` takes it.
+ * @param {string} props.label
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: boolean }[]} [props.items]
  * @param {() => void} [props.onClick] Called when the main button is pressed.
- * @param {string} [props.href] Make the main button a link.
- * @param {'button'|'submit'|'reset'} [props.type='button'] The main button's type.
- * @param {'primary'|'secondary'|'outline'|'ghost'|'danger'|'success'|'secondary-danger'|'outline-danger'|'light'|'warning'|'neutral'|'outline-light'|'outline-secondary'|'text'|'subtle'} [props.variant='primary'] Both halves share it. subtle is deprecated (use neutral) and is removed in 0.79.0.
- * @param {'sm'|'md'|'lg'} [props.size='md']
- * @param {boolean} [props.disabled=false] Disables both halves.
- * @param {boolean} [props.loading=false] Shows the spinner on the main button and disables both halves.
- * @param {string} [props.leftIcon] Icon name before the main label.
- * @param {string} [props.shortcut] The key that runs the main action, drawn as a key chip after the label.
- * @param {string} [props.menuLabel='More actions'] Accessible name of the chevron.
- * @param {'start'|'end'} [props.align='end'] Which edge the menu lines up with.
+ * @param {string} [props.href]
+ * @param {'button'|'submit'|'reset'} [props.type]
+ * @param {'primary'|'secondary'|'outline'|'ghost'|'danger'|'success'|'secondary-danger'|'outline-danger'|'light'|'warning'|'neutral'|'outline-light'|'outline-secondary'|'text'|'subtle'} [props.variant]
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {boolean} [props.disabled]
+ * @param {boolean} [props.loading]
+ * @param {string} [props.leftIcon]
+ * @param {string} [props.shortcut]
+ * @param {string} [props.menuLabel]
+ * @param {'start'|'end'} [props.align]
  * @param {import('react').ElementType} [props.linkComponent] Component for items with `to` (e.g. a router Link).
  * @param {string} [props.className]
  */
 export default function AppSplitButton(props: {
+    /** The main button's text, also the group's accessible name. */
     label: string;
+    /** The menu, as the dropdown takes it. Each item needs a unique `key`. An item with divider true draws a separator. */
     items?: {
         key: string;
         label?: string;
@@ -35,19 +36,51 @@ export default function AppSplitButton(props: {
         onClick?: () => void;
         danger?: boolean;
         shortcut?: string;
-        divider?: true;
+        divider?: boolean;
     }[];
     onClick?: () => void;
+    /** Makes the main button a link. */
     href?: string;
+    /**
+     * The main button's type.
+     * @default "button"
+     */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Both halves share it. subtle is deprecated (use neutral) and is removed in 0.79.0.
+     * @default "primary"
+     */
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'secondary-danger' | 'outline-danger' | 'light' | 'warning' | 'neutral' | 'outline-light' | 'outline-secondary' | 'text' | 'subtle';
+    /**
+     * The size of both halves.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Disables both halves.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Shows the spinner on the main button and disables both halves.
+     * @default false
+     */
     loading?: boolean;
+    /** The icon name before the main label. */
     leftIcon?: string;
+    /** The key that runs the main action, drawn as a key chip after the label. */
     shortcut?: string;
+    /**
+     * The accessible name of the chevron.
+     * @default "More actions"
+     */
     menuLabel?: string;
+    /**
+     * Which edge the menu lines up with.
+     * @default "end"
+     */
     align?: 'start' | 'end';
     linkComponent?: import('react').ElementType;
+    /** Extra CSS classes added to the group. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -18,39 +18,28 @@
  * @param {object} props
  * @param {{ key: string|number, title: import('react').ReactNode, href?: string,
  *   meta?: import('react').ReactNode, trailing?: import('react').ReactNode, badge?: string|number }[]} [props.items]
- *   The list. `meta` is the line under the title (sender, excerpt), `trailing` sits at the end (a
- *   date), `badge` is a short count or label. Keep links and buttons out of all three: the item is
- *   itself a link (with `href`) or a button.
- * @param {string|number} [props.currentKey] The key of the open item.
+ * @param {string|number} [props.currentKey]
  * @param {(key: string|number) => void} [props.onSelect] Called with an item's key when it is opened in place.
- * @param {boolean} [props.selectable=false] A checkbox on each item and a select-all box in the header.
- * @param {Set<string|number>} [props.selectedKeys] The ticked items' keys.
+ * @param {boolean} [props.selectable]
+ * @param {(string|number)[]} [props.selectedKeys]
  * @param {(key: string|number) => void} [props.onToggle] Called when an item's checkbox changes.
  * @param {(checked: boolean) => void} [props.onToggleAll] Called when the select-all box changes.
- * @param {import('react').ReactNode} [props.bulkActions] Buttons shown in place of the header while
- *   items are ticked, beside "N selected", as `AppTableToolbar` does over a table.
- * @param {import('react').ReactNode} [props.header] The list header: a count, a sort label, a filter trigger.
- * @param {import('react').ReactNode} [props.chips] A row under the header for the active filters.
- * @param {import('react').ReactNode} [props.pane] The open item's content.
- * @param {import('react').ReactNode} [props.paneHeader] Above the pane, before the pager: the open
- *   item's title or status, a link back to the list for phones.
- * @param {boolean} [props.pager=true] The record pager at the end of the pane header: "3 of 12"
- *   over the items on screen, and previous and next, which open the item before or after the open
- *   one as a click on it would. Turn it off to put your own `AppRecordPager` in `paneHeader` (a
- *   paged list whose total is larger than the items on screen).
+ * @param {import('react').ReactNode} [props.bulkActions]
+ * @param {import('react').ReactNode} [props.header]
+ * @param {import('react').ReactNode} [props.chips]
+ * @param {import('react').ReactNode} [props.pane]
+ * @param {import('react').ReactNode} [props.paneHeader]
+ * @param {boolean} [props.pager]
  * @param {{ key: string, label: string, onPress: (currentKey?: string|number) => void }[]} [props.shortcuts]
- *   Extra single-key shortcuts (archive, approve); `onPress` gets the open item's key. They are
- *   listed in the `?` sheet. J, K, Enter, `?` (and X with `selectable`) are built in and win over an
- *   extra with the same key.
- * @param {boolean} [props.shortcutsEnabled=true] The keyboard shortcuts and their legend. They listen
- *   while focus is in the view, or nowhere (the page body) for the first view on the page.
- * @param {import('react').ReactNode} [props.empty="Nothing here yet."] Shown when there are no items.
- * @param {boolean} [props.loading=false] Placeholder items instead of the list.
- * @param {3|4|5|6|7|8} [props.listWidth=5] The list's share of 12 columns when side by side.
- * @param {'sm'|'md'|'lg'|'xl'|'xxl'} [props.stackBelow='xl'] Below this tier the list and pane are two screens.
+ * @param {boolean} [props.shortcutsEnabled]
+ * @param {import('react').ReactNode} [props.empty]
+ * @param {boolean} [props.loading]
+ * @param {3|4|5|6|7|8} [props.listWidth]
+ * @param {'sm'|'md'|'lg'|'xl'|'xxl'} [props.stackBelow]
  * @param {string} [props.className]
  */
 export default function AppSplitView(props: {
+    /** The list. meta is the line under the title (sender, excerpt), trailing sits at the end (a date), badge is a short count or label. Keep links and buttons out of all three: the item is itself a link (with href) or a button. Each item needs a unique `key`, a string or a number. */
     items?: {
         key: string | number;
         title: import('react').ReactNode;
@@ -59,27 +48,64 @@ export default function AppSplitView(props: {
         trailing?: import('react').ReactNode;
         badge?: string | number;
     }[];
+    /** The key of the open item. It gets aria-current and the subtle primary background. */
     currentKey?: string | number;
     onSelect?: (key: string | number) => void;
+    /**
+     * A checkbox on each item and a select-all box in the header.
+     * @default false
+     */
     selectable?: boolean;
-    selectedKeys?: Set<string | number>;
+    /** The keys of the ticked items. Each key is a string or a number, and the component reads it as a set. */
+    selectedKeys?: (string | number)[];
     onToggle?: (key: string | number) => void;
     onToggleAll?: (checked: boolean) => void;
+    /** Buttons shown in place of the header while items are ticked, beside "N selected". */
     bulkActions?: import('react').ReactNode;
+    /** The list header: a count, a sort label, a filter trigger. */
     header?: import('react').ReactNode;
+    /** A row under the header for the active filters. */
     chips?: import('react').ReactNode;
+    /** The open item's content. */
     pane?: import('react').ReactNode;
+    /** Above the pane, before the pager: the open item's title or status, and a link back to the list for phones. */
     paneHeader?: import('react').ReactNode;
+    /**
+     * The record pager at the end of the pane header: "3 of 12" over the items on screen, and previous and next, which open the item before or after the open one as a click on it would. Turn it off to put your own pager in paneHeader for a paged list whose total is larger than the items on screen.
+     * @default true
+     */
     pager?: boolean;
+    /** Extra single-key shortcuts (archive, approve), listed in the ? sheet. J, K, Enter, ? (and X with selectable) are built in and win over an extra with the same key. Each shortcut needs a `key`, a single key such as e. */
     shortcuts?: {
         key: string;
         label: string;
         onPress: (currentKey?: string | number) => void;
     }[];
+    /**
+     * The keyboard shortcuts and their legend. They listen while focus is in the view, or nowhere for the first view on the page.
+     * @default true
+     */
     shortcutsEnabled?: boolean;
+    /**
+     * Shown when there are no items.
+     * @default "Nothing here yet."
+     */
     empty?: import('react').ReactNode;
+    /**
+     * Placeholder items instead of the list.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * The list's share of 12 columns when side by side.
+     * @default 5
+     */
     listWidth?: 3 | 4 | 5 | 6 | 7 | 8;
+    /**
+     * Below this tier the list and pane are two screens.
+     * @default "xl"
+     */
     stackBelow?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** Extra classes on the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -5,15 +5,23 @@
  *
  * @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.tone]
  * @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.
+ * @param {string} [props.tooltip]
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement]
  */
 export default function AppStatusBadge(props: {
+    /** The status text, as a string or a React node. When it is empty the badge draws a plain hyphen. */
     label?: import('react').ReactNode;
+    /** The tone class suffix: neutral, primary, success, warning, danger or info. */
     tone?: string;
+    /** Extra classes on the pill, appended after the tone class. */
     className?: string;
+    /** A hover and focus tooltip that flips to stay on screen. Use it to spell out a terse status. */
     tooltip?: string;
+    /**
+     * The preferred tooltip side. Auto picks the side with the most room.
+     * @default "auto"
+     */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
 }): any;

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

@@ -21,24 +21,22 @@
  *
  * @param {object} props
  * @param {{ key?: string, label: string, description?: string, status?: 'done'|'active'|'pending'|'error', href?: string, icon?: string }[]} props.steps
- * @param {'steps'|'journey'} [props.variant='steps']
- * @param {'horizontal'|'vertical'} [props.orientation='horizontal']
- * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of
- *   every step glyph: the done tick, the error alert and each step's own `icon`.
- * @param {'sm'|'md'|'lg'} [props.size='md'] Scales the badge, its number, the labels and the glyphs together.
- * @param {number} [props.iconSize] Every step glyph's width and height in px. Unset, it follows `size` (12, 14 or 18).
- * @param {number} [props.activeStep] When set, statuses are DERIVED from the index —
- *   steps before it are `done`, the one at it is `active`, the rest `pending`. A step's
- *   own explicit `status` still wins, so a failed step can be marked `error`.
+ * @param {'steps'|'journey'} [props.variant]
+ * @param {'horizontal'|'vertical'} [props.orientation]
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant]
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {number} [props.iconSize]
+ * @param {number} [props.activeStep]
  * @param {(step: object, index: number) => void} [props.onStepClick] Makes each step a
  *   button that reports the step it stands for. React-only (no Razor counterpart).
- * @param {string} [props.label='Progress'] Accessible name for the list.
- * @param {'primary'|'info'} [props.tone='primary'] The accent of the active and done steps.
+ * @param {string} [props.label]
+ * @param {'primary'|'info'} [props.tone]
  * @param {import('react').ElementType} [props.linkComponent] Router link for a revisitable
  *   step; it receives `to` instead of `href`.
  * @param {string} [props.className]
  */
 export default function AppStepper(props: {
+    /** The stages of the flow, in order. A step with href links back to that stage. Each step may carry a unique `key`. */
     steps: {
         key?: string;
         label: string;
@@ -47,15 +45,42 @@ export default function AppStepper(props: {
         href?: string;
         icon?: string;
     }[];
+    /**
+     * steps is compact, a numbered circle above its label. journey is wide, a large dot beside a step index and a title.
+     * @default "steps"
+     */
     variant?: 'steps' | 'journey';
+    /**
+     * Lay the steps out in a row or stack them down a side rail.
+     * @default "horizontal"
+     */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * The iconsax style of every step glyph.
+     * @default "linear"
+     */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /**
+     * Scales the badge, its number, the labels and the glyphs together.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /** The width and height in px of every step glyph. Unset, it follows size. */
     iconSize?: number;
+    /** The index of the current step. Steps before it are done, the one at it is active, the rest are pending; a step's own status still wins. */
     activeStep?: number;
     onStepClick?: (step: object, index: number) => void;
+    /**
+     * The accessible name of the list.
+     * @default "Progress"
+     */
     label?: string;
+    /**
+     * The accent of the active and done steps.
+     * @default "primary"
+     */
     tone?: 'primary' | 'info';
     linkComponent?: import('react').ElementType;
+    /** Extra class names added to the stepper's root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,14 +1,30 @@
 declare const AppSwitch: import("react").ForwardRefExoticComponent<{
+    /** The text shown beside the switch. It is a real label tied to the input. */
     label?: import('react').ReactNode;
+    /** The id of the switch input, which its label points at. A generated id is used when none is given. */
     id?: string;
+    /** The field name the switch posts under in a form. */
     name?: string;
+    /** Controlled on or off state. Pair it with onChange. */
     checked?: boolean;
+    /** The starting state when the switch is uncontrolled. */
     defaultChecked?: boolean;
+    /** Locks the switch and dims it. */
     disabled?: boolean;
     onChange?: (event: import('react').ChangeEvent<HTMLInputElement>) => void;
+    /** Error message shown below the control. It replaces the hint and marks the switch invalid. */
     error?: string;
+    /** Helper text shown below the control. It is hidden while an error shows. */
     hint?: string;
+    /**
+     * The track shape. round is the sliding pill with circular ends, pill is the same pill with squircle ends, and circle is a compact round on/off button.
+     * @default "round"
+     */
     shape?: 'round' | 'pill' | 'circle';
+    /**
+     * Extra class names added to the form-check wrapper.
+     * @default ""
+     */
     className?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default AppSwitch;

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

@@ -2,17 +2,21 @@
  * Empty ledger body for AppDataTable.
  *
  * @param {object} props
- * @param {string|import('react').ReactNode} [props.icon] Icon name, or a custom node. Needed unless
- *   `illustration` is set, which replaces the icon.
- * @param {string|import('react').ReactNode} [props.illustration] A named drawing ("no-results" | "no-data" | "empty-inbox" | "no-notifications" | "no-files" | "no-access" | "offline" | "error"), or your own decorative SVG node drawn unboxed at up to 120 px. Replaces the icon bubble when set.
+ * @param {string|import('react').ReactNode} [props.icon]
+ * @param {string|import('react').ReactNode} [props.illustration]
  * @param {import('react').ReactNode} props.title
  * @param {import('react').ReactNode} [props.text]
  * @param {import('react').ReactNode} [props.action]
  */
 export default function AppTableEmptyState(props: {
+    /** An icon name or a custom node shown in a round bubble. Needed unless illustration is set, which replaces it. */
     icon?: string | import('react').ReactNode;
+    /** A named drawing (no-results, no-data, empty-inbox, no-notifications, no-files, no-access, offline or error) or your own decorative SVG node, drawn unboxed at up to 120 px. It replaces the icon bubble when set. */
     illustration?: string | import('react').ReactNode;
+    /** The heading: what would appear here. */
     title: import('react').ReactNode;
+    /** A supporting line of guidance below the title. */
     text?: import('react').ReactNode;
+    /** The next step, usually a small AppButton. */
     action?: import('react').ReactNode;
 }): import("react").JSX.Element;

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

@@ -8,29 +8,43 @@
  * `totalPages` is the page count, the name Razor and the shared response shape use.
  *
  * @param {object} props
- * @param {number} props.page 1-based.
- * @param {number} [props.totalPages] Page count. Wins over `total` when given.
- * @param {number} [props.total] Total rows across all pages. Used when totalPages is not given: pages = ceil(total / pageSize).
+ * @param {number} props.page
+ * @param {number} [props.totalPages]
+ * @param {number} [props.total]
  * @param {number} props.pageSize
  * @param {(page: number) => void} [props.onPageChange]
  * @param {(size: number) => void} [props.onPageSizeChange]
  * @param {number[]} [props.pageSizes]
- * @param {'numbered'|'prev-next'} [props.mode='numbered'] numbered (default) puts windowed page
- *   buttons (first/last plus an ellipsis over any run of hidden pages) between the arrows.
- *   prev-next is the arrows with a "Page N of M" readout.
- * @param {boolean} [props.showPageSize=true] Show the page-size menu. Set false for a pager that
- *   pages but doesn't expose page size.
- * @param {string} [props.className] Merged with the component's own table-pagination class.
+ * @param {'numbered'|'prev-next'} [props.mode]
+ * @param {boolean} [props.showPageSize]
+ * @param {string} [props.className]
  */
 export default function AppTablePagination(props: {
+    /** The current page, counted from 1. */
     page: number;
+    /** The number of pages. It wins over total when both are given. */
     totalPages?: number;
+    /** The number of rows across all pages. Used when totalPages is not given: the page count is the total divided by pageSize, rounded up. */
     total?: number;
+    /** The rows per page. The page-size menu shows it as selected. */
     pageSize: number;
     onPageChange?: (page: number) => void;
     onPageSizeChange?: (size: number) => void;
+    /** The page sizes the menu offers. It offers 5, 10, 25 and 50 when left out. */
     pageSizes?: number[];
+    /**
+     * numbered shows windowed page buttons (first, last and an ellipsis over any run of hidden pages) between the arrows. prev-next shows the arrows with a Page N of M readout.
+     * @default "numbered"
+     */
     mode?: 'numbered' | 'prev-next';
+    /**
+     * Shows the page-size menu. Set it to false for a pager that pages but does not expose the page size.
+     * @default true
+     */
     showPageSize?: boolean;
+    /**
+     * Extra class names added to the pager.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -8,30 +8,44 @@
  * and the swap never shifts what comes after.
  *
  * @param {object} props
- * @param {import('react').ReactNode} [props.filters] Left side: status segments, chips, a filter menu.
- * @param {import('react').ReactNode} [props.actions] Right side: search, export, a columns menu.
- * @param {number} [props.selectedCount=0] Selected rows. Above 0, the bulk bar replaces the toolbar.
- * @param {import('react').ReactNode} [props.bulkActions] Buttons shown in the bulk bar.
+ * @param {import('react').ReactNode} [props.filters]
+ * @param {import('react').ReactNode} [props.actions]
+ * @param {number} [props.selectedCount]
+ * @param {import('react').ReactNode} [props.bulkActions]
  * @param {() => void} [props.onClearSelection] Shows a Clear button in the bulk bar that calls this.
- * @param {number} [props.totalCount] Rows matching across every page. With `onSelectAllMatching`, the bulk
- *   bar offers "Select all 1,284 matching" once the page is selected and more rows match than it shows.
- * @param {number} [props.pageCount] Rows on the current page. The offer waits until `selectedCount`
- *   reaches it; without it, any selection qualifies.
+ * @param {number} [props.totalCount]
+ * @param {number} [props.pageCount]
  * @param {() => void} [props.onSelectAllMatching] Called when the offer is taken; the screen then runs
  *   its action on the query rather than on ids, and sets `allMatchingSelected`.
- * @param {boolean} [props.allMatchingSelected=false] Every matching row is selected: the bar reads
- *   "All 1,284 selected" and Clear becomes "Clear selection". The screen resets it on any row change.
+ * @param {boolean} [props.allMatchingSelected]
  * @param {string} [props.className]
  */
 export default function AppTableToolbar(props: {
+    /** The left side: status segments, chips or a filter menu. */
     filters?: import('react').ReactNode;
+    /** The right side: search, export or a columns menu. */
     actions?: import('react').ReactNode;
+    /**
+     * The number of selected rows. Above 0 the bulk bar replaces the toolbar.
+     * @default 0
+     */
     selectedCount?: number;
+    /** The buttons shown in the bulk bar. */
     bulkActions?: import('react').ReactNode;
     onClearSelection?: () => void;
+    /** The rows matching across every page. With onSelectAllMatching, the bulk bar offers Select all N matching once the page is selected and more rows match than it shows. */
     totalCount?: number;
+    /** The rows on the current page. The offer waits until selectedCount reaches it; without it, any selection qualifies. */
     pageCount?: number;
     onSelectAllMatching?: () => void;
+    /**
+     * Every matching row is selected: the bar reads All N selected and Clear becomes Clear selection. The screen resets it on any row change.
+     * @default false
+     */
     allMatchingSelected?: boolean;
+    /**
+     * Extra class names added to the toolbar.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;