@webority/ui-react 0.88.1 → 0.89.0

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

@@ -24,31 +24,24 @@ import "@webority/ui-elements/elements/overflow";
  *
  * @param {object} props
  * @param {{ key: string, label: import('react').ReactNode, count?: number, countLabel?: string, tone?: string, icon?: string|import('react').ReactNode, image?: string, imageAlt?: string, tooltip?: import('react').ReactNode, danger?: boolean, disabled?: boolean, href?: string, to?: string, target?: string, rel?: string }[]} props.tabs
- *   `count` is printed with Indian digit grouping (1,284; 12,34,567).
- *   `icon` is an iconsax name from the library catalogue OR a custom node (e.g. an iconsax glyph); `image` is a
- *   picture URL (logo/avatar) rendered before the label — `image` wins over `icon`. `tooltip`
- *   is a hover/focus hint (text or node) shown on the tab via AppTooltip — the same branded
- *   tip the Razor `<app-tab tooltip="…">` renders. `href`/`to` turn the tab into a link (see
- *   above); `target`/`rel` are the standard anchor attributes on such a tab.
- * @param {string} props.value Selected tab key.
+ * @param {string} props.value
  * @param {(key: string) => void} [props.onChange] Optional for link tabs; required for panel tabs.
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` tabs (e.g. react-router's Link). The library never imports a router.
- * @param {"underline"|"pills"} [props.variant="underline"]
- * @param {"horizontal"|"vertical"} [props.orientation="horizontal"] Vertical renders a side rail.
- * @param {"sm"|"md"|"lg"} [props.size="md"]
- * @param {boolean} [props.fitted=false] Tabs share the width equally instead of scrolling.
- * @param {"scroll"|"menu"} [props.overflow="scroll"] What a horizontal strip does when the tabs do not fit:
- *   `scroll` scrolls it (chevrons and edge fades); `menu` moves the tabs that do not fit into a More menu
- *   (`<wui-overflow>`), always keeping the selected tab visible. Ignored when `orientation="vertical"`.
- * @param {string} [props.moreLabel="More"] The More button's text when `overflow="menu"`.
- * @param {number} [props.maxVisible] Puts the tabs that do not fit the row in a More menu, as overflow="menu" does; the selected tab always stays visible.
- * @param {"automatic"|"manual"} [props.activation="automatic"] Whether arrow keys also select.
+ * @param {"underline"|"pills"} [props.variant]
+ * @param {"horizontal"|"vertical"} [props.orientation]
+ * @param {"sm"|"md"|"lg"} [props.size]
+ * @param {boolean} [props.fitted]
+ * @param {"scroll"|"menu"} [props.overflow]
+ * @param {string} [props.moreLabel]
+ * @param {number} [props.maxVisible]
+ * @param {"automatic"|"manual"} [props.activation]
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
- * @param {"success"|"warning"|"danger"|"info"} [props.tone] Per-tab count-pill tint (set as `tabs[].tone`).
+ * @param {"success"|"warning"|"danger"|"info"} [props.tone]
  */
 export default function AppTabs(props: {
+    /** The tabs, in order. Each tab also needs a unique `key`. */
     tabs: {
         key: string;
         label: import('react').ReactNode;
@@ -66,19 +59,55 @@ export default function AppTabs(props: {
         target?: string;
         rel?: string;
     }[];
+    /** The key of the selected tab. */
     value: string;
     onChange?: (key: string) => void;
     linkComponent?: import('react').ElementType;
+    /**
+     * The look of the strip: an underline with a sliding bar, or pills.
+     * @default "underline"
+     */
     variant?: "underline" | "pills";
+    /**
+     * horizontal lays the tabs in a row. vertical renders a side rail.
+     * @default "horizontal"
+     */
     orientation?: "horizontal" | "vertical";
+    /**
+     * The size of the tabs.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg";
+    /**
+     * The tabs share the width equally instead of scrolling.
+     * @default false
+     */
     fitted?: boolean;
+    /**
+     * What a horizontal strip does when the tabs do not fit. scroll scrolls it with chevrons and edge fades. menu moves the tabs that do not fit into a More menu and always keeps the selected tab visible. Ignored when orientation is vertical.
+     * @default "scroll"
+     */
     overflow?: "scroll" | "menu";
+    /**
+     * The text of the More button when overflow is menu.
+     * @default "More"
+     */
     moreLabel?: string;
+    /** Puts the tabs that do not fit the row in a More menu, as overflow menu does. The selected tab always stays visible. */
     maxVisible?: number;
+    /**
+     * Whether the arrow keys also select. automatic selects as focus moves. manual moves focus only and selects on Enter or Space.
+     * @default "automatic"
+     */
     activation?: "automatic" | "manual";
+    /** The accessible name of the tab strip. */
     ariaLabel?: string;
+    /**
+     * Extra class names added to the tab strip.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
+    /** Tints the count pill of a tab. Set it as tone on a tab, not on the strip. */
     tone?: "success" | "warning" | "danger" | "info";
 }): import("react").JSX.Element;

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

@@ -1,22 +1,60 @@
 import "@webority/ui-elements/elements/taginput";
 declare const AppTagInput: import("react").ForwardRefExoticComponent<{
+    /** The current tags, one string per tag, in the order shown. */
     values?: string[];
     onChange?: (values: string[]) => void;
+    /**
+     * Placeholder for the input field.
+     * @default "Add…"
+     */
     placeholder?: string;
+    /** The field name the tags post under. */
     name?: string;
+    /** The label above the field. */
     label?: import('react').ReactNode;
+    /** An error message. It replaces the hint and marks the field invalid. */
     error?: string;
+    /** Help text under the field. */
     hint?: string;
+    /**
+     * Marks the field required and shows the required mark beside the label.
+     * @default false
+     */
     required?: boolean;
+    /** Control size around the default; leave unset for the default size. */
     size?: 'sm' | 'lg';
+    /** The most tags the field accepts. */
     maxTags?: number;
+    /**
+     * Allows case-sensitive duplicate values.
+     * @default false
+     */
     allowDuplicates?: boolean;
+    /**
+     * Locks the field.
+     * @default false
+     */
     disabled?: boolean;
+    /** The control's id. A generated id is used when this is unset. */
     id?: string;
+    /** The accessible name of the input. When unset, a text label names it. */
     ariaLabel?: string;
+    /**
+     * A class added to the control.
+     * @default ""
+     */
     className?: string;
+    /**
+     * A class added to the wrapping field.
+     * @default ""
+     */
     fieldClassName?: string;
+    /** Help content shown in an info tip beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of that info tip.
+     * @default "More information"
+     */
     helpLabel?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppTagInput;

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

@@ -1,22 +1,68 @@
 declare const AppTextarea: import("react").ForwardRefExoticComponent<{
+    /** The label above the field. */
     label?: import('react').ReactNode;
+    /**
+     * Marks the field required and shows the required mark beside the label.
+     * @default false
+     */
     required?: boolean;
+    /** An error message. It replaces the hint and marks the field invalid. */
     error?: string;
+    /** Help text under the field. */
     hint?: string;
+    /** Text shown in the empty field. */
     placeholder?: string;
+    /** Info-tip content shown beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of the info-tip button.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /** The control's id. A generated id is used when this is unset. */
     id?: string;
+    /** The field name the text posts under. */
     name?: string;
+    /**
+     * The visible number of text lines.
+     * @default 4
+     */
     rows?: number;
+    /**
+     * Grows the height to fit the content as the user types.
+     * @default false
+     */
     autoGrow?: boolean;
+    /**
+     * Shows a live character count under the field, as count / maxLength when maxLength is set.
+     * @default false
+     */
     showCount?: boolean;
+    /** The character cap. The count turns red as it is approached. */
     maxLength?: number;
+    /**
+     * Locks the field and keeps it out of the form post.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Locks the field; the value still posts.
+     * @default false
+     */
     readOnly?: boolean;
+    /**
+     * A class added to the control.
+     * @default ""
+     */
     className?: string;
+    /**
+     * A class added to the wrapping field.
+     * @default ""
+     */
     fieldClassName?: string;
+    /** The controlled value, paired with onChange. */
     value?: string | number;
+    /** The starting value of an uncontrolled field. */
     defaultValue?: string | number;
     onInput?: (e: import('react').FormEvent<HTMLTextAreaElement>) => void;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -20,34 +20,80 @@
  * that have a direction.
  *
  * @param {object} props
- * @param {"icon"|"segmented"} [props.variant="icon"] One cycling disc, or one option per mode.
- * @param {"wave"|"circle"|"slide"|"blinds"|"fade"|"none"} [props.effect="wave"] The page-wide effect.
- * @param {boolean} [props.includeAuto=true] Offer the system-following mode beside light and dark. Off, the toggle offers light and dark and shows an auto page as its resolved theme.
- * @param {string} [props.storageKey="theme"] The localStorage key the choice is kept under.
- * @param {number} [props.duration] Effect length in ms; each effect has its own default.
- * @param {string} [props.label="Theme"] Accessible name: the disc's tooltip ("Theme: dark") or the segmented group's name.
- * @param {string} [props.lightLabel="Light"] The segmented variant's option text for light.
- * @param {string} [props.darkLabel="Dark"] The segmented variant's option text for dark.
- * @param {string} [props.autoLabel="System"] The segmented variant's option text for auto.
- * @param {string} [props.name] The segmented variant's field name (what groups its radios). Defaults to a generated one.
- * @param {"sm"|"md"|"lg"|"xl"} [props.size="md"] The disc's glyph size (16/20/24/28px, the disc scales with it) or the segmented strip's size (xl draws the lg strip).
- * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] The disc's preferred tooltip side.
+ * @param {"icon"|"segmented"} [props.variant]
+ * @param {"wave"|"circle"|"slide"|"blinds"|"fade"|"none"} [props.effect]
+ * @param {boolean} [props.includeAuto]
+ * @param {string} [props.storageKey]
+ * @param {number} [props.duration]
+ * @param {string} [props.label]
+ * @param {string} [props.lightLabel]
+ * @param {string} [props.darkLabel]
+ * @param {string} [props.autoLabel]
+ * @param {string} [props.name]
+ * @param {"sm"|"md"|"lg"|"xl"} [props.size]
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement]
  * @param {(mode: "light"|"dark"|"auto") => void} [props.onChange] Fires with the new mode once it is applied.
  * @param {string} [props.className]
  */
 export default function AppThemeToggle(props: {
+    /**
+     * One cycling disc, or one option per mode.
+     * @default "icon"
+     */
     variant?: "icon" | "segmented";
+    /**
+     * The page-wide effect that plays when the theme changes.
+     * @default "wave"
+     */
     effect?: "wave" | "circle" | "slide" | "blinds" | "fade" | "none";
+    /**
+     * Offers the system-following mode beside light and dark. Off, the toggle offers only light and dark.
+     * @default true
+     */
     includeAuto?: boolean;
+    /**
+     * The localStorage key the choice is kept under.
+     * @default "theme"
+     */
     storageKey?: string;
+    /** The effect length in milliseconds. Each effect has its own default. */
     duration?: number;
+    /**
+     * The accessible name: the disc's tooltip, or the segmented group's name.
+     * @default "Theme"
+     */
     label?: string;
+    /**
+     * The segmented variant's option text for light.
+     * @default "Light"
+     */
     lightLabel?: string;
+    /**
+     * The segmented variant's option text for dark.
+     * @default "Dark"
+     */
     darkLabel?: string;
+    /**
+     * The segmented variant's option text for the system-following mode.
+     * @default "System"
+     */
     autoLabel?: string;
+    /** The segmented variant's field name, which groups its radios. A generated name is used when this is unset. */
     name?: string;
+    /**
+     * The disc's glyph size (16, 20, 24 or 28 px) or the segmented strip's size; xl draws the lg strip.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * The disc's preferred tooltip side.
+     * @default "auto"
+     */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
     onChange?: (mode: "light" | "dark" | "auto") => void;
+    /**
+     * A class added to the toggle.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,24 +1,61 @@
 import "@webority/ui-elements/elements/timepicker";
 declare const AppTimePicker: import("react").ForwardRefExoticComponent<{
+    /** The time as 24-hour "HH:mm" text, which is also the wire format. */
     value?: string;
     onChange?: (value: string) => void;
+    /** The label above the field. */
     label?: string;
+    /**
+     * Marks the field required and shows the required mark beside the label.
+     * @default false
+     */
     required?: boolean;
+    /** Help text under the field. */
     hint?: string;
+    /** An error message. It replaces the hint and marks the field invalid. */
     error?: string;
+    /** Content for the info tip beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of the info-tip button.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /** The field name the time posts under. */
     name?: string;
+    /** The earliest time that can be picked, as "HH:mm". */
     min?: string;
+    /** The latest time that can be picked, as "HH:mm". */
     max?: string;
+    /** The minutes between choices. The control uses 30 when this is unset. */
     step?: number;
-    format?: '12' | '24' | 12 | 24;
+    /**
+     * The display format, 12 or 24 hour. The wire value stays 24 hour.
+     * @default 24
+     */
+    format?: 12 | 24;
+    /**
+     * The text shown while no time is chosen.
+     * @default "Select time"
+     */
     placeholder?: string;
+    /** Locks the field. */
     disabled?: boolean;
+    /** The control height tier, matching AppInput; leave unset for the default height. */
     size?: 'sm' | 'md' | 'lg';
+    /** The control's id. A generated id is used when this is unset. */
     id?: string;
+    /** The accessible name of the control. When unset, a text label names it. */
     ariaLabel?: string;
+    /**
+     * A class added to the control.
+     * @default ""
+     */
     className?: string;
+    /**
+     * A class added to the wrapping field.
+     * @default ""
+     */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppTimePicker;

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

@@ -21,29 +21,20 @@
  *   tone?: 'neutral'|'success'|'warning'|'danger'|'info',
  *   status?: 'upcoming'|'current'|'done'|'on-hold'|'rejected'|'cancelled'|'skipped',
  *   title: import('react').ReactNode, description?: import('react').ReactNode,
- *   at?: string, atTitle?: string, time?: string, by?: string, byHref?: string, note?: string }[]} props.items
- *   Feed variant: newest first. Progress variant: first stage first. Steps variant: first step first.
- *   `status` drives the dot + rail in the progress variant; `description` is a
- *   plain inline subtext under the title (distinct from the boxed `note`).
- *   Steps variant: the label above the title; omitted it reads `Step 1`, `Step 2`…, an empty string hides it.
- *   `at` is the date and `time` an optional time-of-day shown beside it — both are
- *   pre-formatted strings the caller owns (IST, DD-MMM-YYYY / HH:mm); pass either or both.
- *   `atTitle` is the full date and time shown on hover over `at`, such as `14 Oct 2026, 4:05 pm`; omit it for no tooltip.
- *   `byHref` links the `by` name (a path starting with one `/`, or an `http://` / `https://` address);
- *   any other value, or `byHref` without `by`, throws.
- * @param {'feed'|'progress'|'steps'} [props.variant] Layout mode. Defaults to `feed`.
- *   `steps`: a numbered process: large tinted icon discs joined by a dashed line, each with an eyebrow, title and description. A row from md up, a column on phones.
- * @param {'vertical'|'horizontal'} [props.orientation] Feed and progress: vertical (default) or horizontal.
- *   Steps: a row from md up and a column below; `vertical` keeps the column at every width.
- *   Horizontal lays dots in a row with the body beneath each. Orthogonal to `variant` for feed and progress.
- * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant] The iconsax style of the dot icons. Defaults to bulk for steps and linear otherwise.
- * @param {'sm'|'md'|'lg'|number} [props.size] A preset, or the dot diameter in px. sm, md (default) and lg set the dot (feed and progress 18, 24 and 32px; steps 44, 56 and 72px) and scale the text and spacing to match. A px number sets only the dot, and the glyph follows it.
+ *   at?: string, atTitle?: string, time?: string, by?: string, byHref?: string, note?: string }[]} [props.items]
+ * @param {'feed'|'progress'|'steps'} [props.variant]
+ * @param {'vertical'|'horizontal'} [props.orientation]
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant]
+ * @param {'sm'|'md'|'lg'|number} [props.size]
  * @param {string} [props.className]
- * @param {import('react').CSSProperties} [props.style] Inline style on the list;
- *   the `size` var is merged into it.
+ * @param {import('react').CSSProperties} [props.style]
  */
 export default function AppTimeline(props: {
-    items: {
+    /**
+     * The entries. Feed: newest first. Progress and steps: first stage first.
+     * @default []
+     */
+    items?: {
         key?: string;
         icon?: string;
         eyebrow?: import('react').ReactNode;
@@ -58,10 +49,21 @@ export default function AppTimeline(props: {
         byHref?: string;
         note?: string;
     }[];
+    /**
+     * The layout: an activity feed, a status tracker for a fixed sequence of stages, or a numbered process.
+     * @default "feed"
+     */
     variant?: 'feed' | 'progress' | 'steps';
+    /** Feed and progress: vertical or horizontal. Steps: a row from md up and a column below, where vertical keeps the column at every width. */
     orientation?: 'vertical' | 'horizontal';
+    /** The iconsax style of the dot icons. Unset, steps use bulk and the others linear. */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /** A preset, or the dot diameter in px. The presets scale the dot, text and spacing together; a number sets only the dot. */
     size?: 'sm' | 'md' | 'lg' | number;
+    /**
+     * A class added to the list.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

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

@@ -8,24 +8,42 @@
  * id (replace/refresh), and a string OR React-node message (rich body).
  *
  * @param {object} props
- * @param {'top-start'|'top-center'|'top-end'|'middle-center'|'bottom-start'|'bottom-center'|'bottom-end'} [props.position='bottom-end']
- * @param {number} [props.maxVisible=4] Most toasts shown at once; older ones collapse to a "+N more" chip.
- * @param {'rise'|'organic'|'jelly'|'spring'} [props.animation='rise'] Default entrance motion for
- *   every toast: `rise` (soft fade + lift), `organic` (surface materializes, status icon grows
- *   from a dot, message trails in), `jelly` (squash-and-stretch drop), `spring` (elastic
- *   slide-up). A per-toast `animation` option overrides it.
- * @param {'rounded'|'pill'|'sharp'} [props.shape='rounded'] Default corner treatment; a per-toast
- *   `shape` option overrides it.
- * @param {'auto'|'inverse'} [props.surface='auto'] `inverse` renders every toast on the OPPOSITE
- *   surface of the active mode — a dark card in light mode, a light card in dark mode — so the
- *   stack always contrasts with the page. A per-toast `surface` option overrides it.
- * @param {string} [props.className] Extra class on the container element.
+ * @param {'top-start'|'top-center'|'top-end'|'middle-center'|'bottom-start'|'bottom-center'|'bottom-end'} [props.position]
+ * @param {number} [props.maxVisible]
+ * @param {'rise'|'organic'|'jelly'|'spring'} [props.animation]
+ * @param {'rounded'|'pill'|'sharp'} [props.shape]
+ * @param {'auto'|'inverse'} [props.surface]
+ * @param {string} [props.className]
  */
 export default function AppToast(props: {
+    /**
+     * Which corner or edge of the screen the toasts stack in.
+     * @default "bottom-end"
+     */
     position?: 'top-start' | 'top-center' | 'top-end' | 'middle-center' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+    /**
+     * Most toasts shown at once. Older ones collapse to a "+N more" chip.
+     * @default 4
+     */
     maxVisible?: number;
+    /**
+     * Default entrance motion for every toast: `rise` (soft fade and lift), `organic` (surface materializes, status icon grows from a dot, message trails in), `jelly` (squash-and-stretch drop), `spring` (elastic slide-up). A per-toast `animation` option overrides it.
+     * @default "rise"
+     */
     animation?: 'rise' | 'organic' | 'jelly' | 'spring';
+    /**
+     * Default corner treatment. A per-toast `shape` option overrides it.
+     * @default "rounded"
+     */
     shape?: 'rounded' | 'pill' | 'sharp';
+    /**
+     * `inverse` renders every toast on the opposite surface of the active mode: a dark card in light mode, a light card in dark mode, so the stack always contrasts with the page. A per-toast `surface` option overrides it.
+     * @default "auto"
+     */
     surface?: 'auto' | 'inverse';
+    /**
+     * Extra class on the container element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -17,26 +17,29 @@
  *
  * @param {object} props
  * @param {{ value: string, title: string, icon: string|import('react').ReactNode,
- *   disabled?: boolean }[]} props.items The tools, left to right.
+ *   disabled?: boolean }[]} props.items
  * @param {{ key?: string, title: string, icon: string|import('react').ReactNode,
- *   onClick?: () => void, disabled?: boolean }[]} [props.actions] Momentary buttons after
- *   a divider — fire and forget, never selected.
- * @param {string} [props.value] The active tool's value (controlled).
- * @param {string} [props.defaultValue] Initially active tool (uncontrolled).
+ *   onClick?: () => void, disabled?: boolean }[]} [props.actions]
+ * @param {string} [props.value]
+ * @param {string} [props.defaultValue]
  * @param {(value: string) => void} [props.onSelect]
- * @param {string} props.label Accessible name for the toolbar.
- * @param {string} [props.name] Field name grouping the radios (and what posts in a form).
- *   Defaults to a generated one.
- * @param {boolean} [props.disabled=false] Disables the whole toolbar.
+ * @param {string} props.label
+ * @param {string} [props.name]
+ * @param {boolean} [props.disabled]
  * @param {string} [props.className]
  */
 export default function AppToolbar(props: {
+    /** The tools, left to right. */
     items: {
         value: string;
         title: string;
         icon: string | import('react').ReactNode;
         disabled?: boolean;
     }[];
+    /**
+     * Momentary buttons after a divider: fire and forget, never selected.
+     * @default []
+     */
     actions?: {
         key?: string;
         title: string;
@@ -44,11 +47,23 @@ export default function AppToolbar(props: {
         onClick?: () => void;
         disabled?: boolean;
     }[];
+    /** The active tool's value (controlled). */
     value?: string;
+    /** Initially active tool (uncontrolled). */
     defaultValue?: string;
     onSelect?: (value: string) => void;
+    /** Accessible name for the toolbar. */
     label: string;
+    /** Field name grouping the radios, and what posts in a form. Defaults to a generated one. */
     name?: string;
+    /**
+     * Disables the whole toolbar.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Extra class on the toolbar element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -5,30 +5,40 @@
  * Bootstrap's own tooltip, so both surfaces stay in lockstep.
  *
  * @param {object} props
- * @param {import('react').ReactNode} props.content The tooltip text or node (required).
+ * @param {import('react').ReactNode} props.content
  * @param {import('react').ReactElement} props.children A single trigger element that forwards
  *   a ref (a DOM element, or a react-bootstrap-based App* like AppButton/AppActionIcon). It
  *   renders as written; hovering or focusing it reveals the tooltip.
- * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.placement='top'] Where the tooltip appears.
- *   A named side is preferred but flips if needed to stay in view; `auto` lets Popper pick the
- *   side with the most room outright. Either way the tooltip never clips off-screen.
- * @param {'default'|'dark'|'primary'|'success'|'warning'|'danger'} [props.tone='default'] Preset
- *   colour of the tooltip. `default` is the light surface look; the others are solid tints. For
- *   a fully custom colour, pass a `className` whose rule sets the `--wui-tooltip-bg` /
- *   `--wui-tooltip-color` / `--wui-tooltip-border` / `--wui-tooltip-radius` CSS vars.
- * @param {'sm'|'md'|'lg'} [props.size='md'] Preset size (font-size + padding + max-width). For a
- *   fully custom size, pass a `className` that sets the `--wui-tooltip-font-size` /
- *   `--wui-tooltip-padding-y` / `--wui-tooltip-padding-x` / `--wui-tooltip-max-width` CSS vars.
- * @param {string} [props.shortcut] The key that runs the action ("A", "E", "/"), drawn as a key chip
- *   after the text ("Approve A"). One character is written in upper case.
- * @param {string} [props.className] Extra class on the tooltip element.
+ * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.placement]
+ * @param {'default'|'dark'|'primary'|'success'|'warning'|'danger'} [props.tone]
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {string} [props.shortcut]
+ * @param {string} [props.className]
  */
 export default function AppTooltip({ content, children, placement, tone, size, shortcut, className, ...rest }: {
+    /** The tooltip text or node. */
     content: import('react').ReactNode;
     children: import('react').ReactElement;
+    /**
+     * Where the tooltip appears. A named side is preferred but flips if needed to stay in view; `auto` lets Popper pick the side with the most room outright. Either way the tooltip never clips off-screen.
+     * @default "top"
+     */
     placement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
+    /**
+     * Preset colour of the tooltip. `default` is the light surface look; the others are solid tints. For a fully custom colour, pass a `className` whose rule sets the `--wui-tooltip-bg`, `--wui-tooltip-color`, `--wui-tooltip-border` and `--wui-tooltip-radius` CSS vars.
+     * @default "default"
+     */
     tone?: 'default' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+    /**
+     * Preset size (font size, padding and max width). For a fully custom size, pass a `className` that sets the `--wui-tooltip-font-size`, `--wui-tooltip-padding-y`, `--wui-tooltip-padding-x` and `--wui-tooltip-max-width` CSS vars.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /** The key that runs the action ("A", "E", "/"), drawn as a key chip after the text ("Approve A"). One character is written in upper case. */
     shortcut?: string;
+    /**
+     * Extra class on the tooltip element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;