@webority/ui-react 0.88.1 → 0.89.0

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

@@ -1,23 +1,60 @@
 declare const AppNumberInput: import("react").ForwardRefExoticComponent<{
-    value?: number | '';
+    /** The current number. Leave it unset for an empty field. */
+    value?: number;
     onChange?: (next: number | '') => void;
+    /** The label above the field. A required field shows a required mark after it. */
     label?: import('react').ReactNode;
+    /**
+     * Marks the field as required, on the input and on the label.
+     * @default false
+     */
     required?: boolean;
+    /** An error message under the field. It sets the error state and aria-invalid on the input. */
     error?: string;
+    /** Help text under the field, linked to the input for screen readers. */
     hint?: string;
+    /** Text shown in the empty field. */
     placeholder?: string;
+    /** Content for the info-tip beside the label. The caller supplies the node. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of the info-tip button.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /** The lowest value, inclusive. The decrease stepper disables at it. */
     min?: number;
+    /** The highest value, inclusive. The increase stepper disables at it. */
     max?: number;
+    /**
+     * The amount one stepper click, or one ArrowUp or ArrowDown press, adds or removes.
+     * @default 1
+     */
     step?: number;
+    /**
+     * The number of decimal places the value rounds to.
+     * @default 0
+     */
     precision?: number;
+    /** A unit suffix shown inside the field after the input, such as kg or %. */
     unit?: string;
+    /**
+     * The control size: sm, md or lg.
+     * @default "md"
+     */
     size?: string;
+    /** The input's id. Unset, a generated id is used. */
     id?: string;
+    /** The input's name, for forms. */
     name?: string;
+    /** Extra classes on the input. */
     className?: string;
+    /** Extra classes on the field wrapper. */
     fieldClassName?: string;
+    /**
+     * Disables the field and both steppers.
+     * @default false
+     */
     disabled?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default AppNumberInput;

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

@@ -13,20 +13,20 @@ import "@webority/ui-elements/elements/onboarding-checklist";
  *
  * @param {object} props
  * @param {{ key?: string, label: string, description?: string, href?: string, status?: 'done'|'current'|'skipped'|'todo' }[]} props.steps
- *   The steps in order. `href` makes the label a link to where the step is done; `status` defaults to `todo`.
- * @param {string} [props.title="Get started"] The heading, and the name of the progress bar.
- * @param {boolean} [props.defaultCollapsed] Whether the steps start collapsed. Defaults to whether every step is done or skipped.
- * @param {boolean} [props.defaultDismissed=false] Whether the checklist starts dismissed, showing only the restore button.
- * @param {string} [props.storageKey] Remembers a dismissal across visits under this key (one per checklist). Unset, it lasts the page.
- * @param {string} [props.dismissLabel="Dismiss checklist"] The name and tooltip of the close icon.
- * @param {string} [props.restoreLabel="Show setup checklist"] The text of the button that brings a dismissed checklist back.
+ * @param {string} [props.title]
+ * @param {boolean} [props.defaultCollapsed]
+ * @param {boolean} [props.defaultDismissed]
+ * @param {string} [props.storageKey]
+ * @param {string} [props.dismissLabel]
+ * @param {string} [props.restoreLabel]
  * @param {() => void} [props.onDismiss] Called when the checklist is dismissed.
  * @param {() => void} [props.onRestore] Called when a dismissed checklist is brought back.
  * @param {(collapsed: boolean) => void} [props.onCollapsedChange] Called when the heading collapses or expands the steps.
- * @param {import('react').ElementType} [props.linkComponent] Router link for a step with an `href`; it receives `to` instead of `href`.
+ * @param {import('react').ElementType} [props.linkComponent]
  * @param {string} [props.className]
  */
 export default function AppOnboardingChecklist(props: {
+    /** The steps in order. Each step has a label, an optional description and href, and a status. */
     steps: {
         key?: string;
         label: string;
@@ -34,15 +34,34 @@ export default function AppOnboardingChecklist(props: {
         href?: string;
         status?: 'done' | 'current' | 'skipped' | 'todo';
     }[];
+    /**
+     * The heading, and the name of the progress bar.
+     * @default "Get started"
+     */
     title?: string;
+    /** Whether the steps start collapsed. Unset, they start collapsed when every step is done or skipped. */
     defaultCollapsed?: boolean;
+    /**
+     * Whether the checklist starts dismissed, showing only the restore button.
+     * @default false
+     */
     defaultDismissed?: boolean;
+    /** Remembers a dismissal across visits under this key, one per checklist. Unset, the dismissal lasts the page. */
     storageKey?: string;
+    /**
+     * The name and tooltip of the close icon.
+     * @default "Dismiss checklist"
+     */
     dismissLabel?: string;
+    /**
+     * The text of the button that brings a dismissed checklist back.
+     * @default "Show setup checklist"
+     */
     restoreLabel?: string;
     onDismiss?: () => void;
     onRestore?: () => void;
     onCollapsedChange?: (collapsed: boolean) => void;
     linkComponent?: import('react').ElementType;
+    /** Extra classes on the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,18 +1,42 @@
 import "@webority/ui-elements/elements/otp";
 declare const AppOtpInput: import("react").ForwardRefExoticComponent<{
+    /** The code entered so far. The field is controlled, so pair it with onChange. */
     value?: string;
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
+    /**
+     * Characters in the code. TOTP is 6; backup codes are often 8.
+     * @default 6
+     */
     length?: number;
+    /**
+     * Drives the on-screen keyboard and what the field will accept.
+     * @default "numeric"
+     */
     mode?: "numeric" | "alphanumeric";
+    /** The visible label. It also becomes the field's accessible name. */
     label?: string;
+    /**
+     * Marks the field required for assistive technology and shows the required mark beside the label.
+     * @default false
+     */
     required?: boolean;
+    /** Help text under the code. It is hidden while an error is shown. */
     hint?: string;
+    /** The error message under the code. It replaces the hint and marks the field invalid. */
     error?: string;
+    /**
+     * Disables the field so the code cannot be entered.
+     * @default false
+     */
     disabled?: boolean;
+    /** The form field name, so a plain form post includes the code. */
     name?: string;
+    /** The element id. A generated id is used when this is omitted. */
     id?: string;
+    /** Class to apply to the control element. */
     className?: string;
+    /** Class to apply to the wrapper field div. */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppOtpInput;

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

@@ -17,46 +17,87 @@
  * icon, eyebrow or subtitle.
  *
  * @param {object} props
- * @param {import('react').ReactNode} props.title  Rendered as the screen heading.
- * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h1"]  The heading element for the title. Keep one h1 per page.
- * @param {import('react').ReactNode} [props.subtitle]  A count, status, or short description.
- * @param {import('react').ReactNode} [props.eyebrow]   Small kicker label above the title.
- * @param {string|import('react').ReactNode} [props.icon]  Leading glyph — an Icon name or a node.
- * @param {"primary"|"success"|"warning"|"danger"|"info"} [props.tone="primary"]  Tints the icon tile + eyebrow.
- * @param {import('react').ReactNode} [props.status]   Inline slot beside the title (e.g. an AppStatusBadge).
- * @param {import('react').ReactNode} [props.breadcrumbs]  A breadcrumbs row above the masthead (usually AppBreadcrumbs).
- * @param {import('react').ReactNode} [props.actions]  Right-aligned page-level actions (usually an AppButton).
- * @param {import('react').ReactNode} [props.views]  Saved views after the title (size "bar" only).
- * @param {import('react').ReactNode} [props.tools]  Search, filters and display, before the actions (size "bar" only).
- * @param {import('react').ReactNode} [props.meta]  One short facts line or summary (size "bar" only).
- * @param {"inline"|"below"} [props.metaPlacement="inline"]  Where the meta line sits: inside the bar, or under it (size "bar" only).
- * @param {string} [props.bulkFor]  Id of the data table whose selection swaps views and tools for its bulk bar (size "bar" only). Ticking rows hides views and tools and shows the bulk slot with an N selected count; the table's own toolbar bulk bar stays hidden.
- * @param {import('react').ReactNode} [props.bulk]  Bulk actions shown in the bar while the table named by bulkFor has rows ticked (size "bar" only).
- * @param {"sm"|"md"|"lg"|"bar"} [props.size="md"]  Title / spacing scale. "bar" is one 40px row.
- * @param {"start"|"center"} [props.align="start"]  Centre the masthead — for empty states and wizards.
- * @param {boolean} [props.divider=false]  A bottom border under the masthead.
- * @param {boolean} [props.sticky=false]  Stick the masthead to the top of the scroll container.
+ * @param {import('react').ReactNode} props.title
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
+ * @param {import('react').ReactNode} [props.subtitle]
+ * @param {import('react').ReactNode} [props.eyebrow]
+ * @param {string|import('react').ReactNode} [props.icon]
+ * @param {"primary"|"success"|"warning"|"danger"|"info"} [props.tone]
+ * @param {import('react').ReactNode} [props.status]
+ * @param {import('react').ReactNode} [props.breadcrumbs]
+ * @param {import('react').ReactNode} [props.actions]
+ * @param {import('react').ReactNode} [props.views]
+ * @param {import('react').ReactNode} [props.tools]
+ * @param {import('react').ReactNode} [props.meta]
+ * @param {"inline"|"below"} [props.metaPlacement]
+ * @param {string} [props.bulkFor]
+ * @param {import('react').ReactNode} [props.bulk]
+ * @param {"sm"|"md"|"lg"|"bar"} [props.size]
+ * @param {"start"|"center"} [props.align]
+ * @param {boolean} [props.divider]
+ * @param {boolean} [props.sticky]
  * @param {string} [props.className]
  */
 export default function AppPageHeader(props: {
+    /** Rendered as the screen heading. */
     title: import('react').ReactNode;
+    /**
+     * The heading element for the title. Keep one h1 per page.
+     * @default "h1"
+     */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** A count, status, or short description. */
     subtitle?: import('react').ReactNode;
+    /** Small kicker label above the title. */
     eyebrow?: import('react').ReactNode;
+    /** Leading glyph: an icon name or a node. */
     icon?: string | import('react').ReactNode;
+    /**
+     * Tints the icon tile and the eyebrow.
+     * @default "primary"
+     */
     tone?: "primary" | "success" | "warning" | "danger" | "info";
+    /** Inline slot beside the title (for example an AppStatusBadge). */
     status?: import('react').ReactNode;
+    /** A breadcrumbs row above the masthead (usually AppBreadcrumbs). */
     breadcrumbs?: import('react').ReactNode;
+    /** Right-aligned page-level actions (usually an AppButton). */
     actions?: import('react').ReactNode;
+    /** Saved views after the title (size bar only). */
     views?: import('react').ReactNode;
+    /** Search, filters and display, before the actions (size bar only). */
     tools?: import('react').ReactNode;
+    /** One short facts line or summary (size bar only). */
     meta?: import('react').ReactNode;
+    /**
+     * Where the meta line sits: inside the bar, or under it (size bar only).
+     * @default "inline"
+     */
     metaPlacement?: "inline" | "below";
+    /** Id of the data table whose selection swaps views and tools for its bulk bar (size bar only). Ticking rows hides views and tools and shows the bulk slot with an N selected count; the table's own toolbar bulk bar stays hidden. */
     bulkFor?: string;
+    /** Bulk actions shown in the bar while the table named by bulkFor has rows ticked (size bar only). */
     bulk?: import('react').ReactNode;
+    /**
+     * Title and spacing scale. bar is one 40px row.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg" | "bar";
+    /**
+     * Centres the masthead, for empty states and wizards.
+     * @default "start"
+     */
     align?: "start" | "center";
+    /**
+     * A bottom border under the masthead.
+     * @default false
+     */
     divider?: boolean;
+    /**
+     * Sticks the masthead to the top of the scroll container.
+     * @default false
+     */
     sticky?: boolean;
+    /** Extra classes on the header element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -5,21 +5,35 @@
  * Renders nothing (null) when totalPages <= 1.
  *
  * @param {object} props
- * @param {number} props.page Current page, 1-based. Required.
- * @param {number} props.totalPages Total page count. Required.
+ * @param {number} props.page
+ * @param {number} props.totalPages
  * @param {(page: number) => void} props.onChange Callback fired when a page is clicked.
- * @param {number} [props.siblings=1] Window radius — how many page buttons sit either side of the
- *   current page before an ellipsis appears. Default 1 shows current ± 1 page.
- * @param {'sm'|'md'} [props.size='md'] Control size: compact ('sm') or standard ('md').
- * @param {string} [props.ariaLabel='Pagination'] Accessible label for the <nav>.
- * @param {string} [props.className] Extra CSS class to add to the nav wrapper.
+ * @param {number} [props.siblings]
+ * @param {'sm'|'md'} [props.size]
+ * @param {string} [props.ariaLabel]
+ * @param {string} [props.className]
  */
 export default function AppPagination(props: {
+    /** Current page, 1-based. The page button for this page carries aria-current set to page. */
     page: number;
+    /** Total page count. The component renders nothing when it is 1 or less. */
     totalPages: number;
     onChange: (page: number) => void;
+    /**
+     * Window radius: how many page buttons sit either side of the current page before an ellipsis appears. The default of 1 shows the current page plus or minus one.
+     * @default 1
+     */
     siblings?: number;
+    /**
+     * Control size: compact ('sm') or standard ('md').
+     * @default "md"
+     */
     size?: 'sm' | 'md';
+    /**
+     * Accessible label for the nav element.
+     * @default "Pagination"
+     */
     ariaLabel?: string;
+    /** Extra CSS class to add to the nav wrapper. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,19 +1,56 @@
 import "@webority/ui-elements/elements/phone";
 declare const AppPhoneNumberInput: import("react").ForwardRefExoticComponent<{
+    /** The phone number as entered. */
     value?: string;
     onChange?: (value: string) => void;
+    /** The ISO country code to start on. Left unset, the control starts on the viewer's own country. */
     country?: string;
+    /**
+     * Turns the field off.
+     * @default false
+     */
     disabled?: boolean;
+    /** The form field name. */
     name?: string;
+    /** The id of the phone control. Left unset, one is generated. */
     id?: string;
+    /**
+     * The label above the field.
+     * @default "Phone number"
+     */
     label?: import('react').ReactNode;
+    /** Hint text in the empty field. Left unset, the control hints with the country's example number. */
     placeholder?: string;
+    /**
+     * Marks the field required and adds the required mark to the label.
+     * @default false
+     */
     required?: boolean;
+    /** Help text under the field. The error replaces it while one is shown. */
     hint?: string;
+    /** An error message under the field, which also turns the border red. */
     error?: string;
+    /**
+     * Shows the country flag.
+     * @default true
+     */
     showFlag?: boolean;
+    /**
+     * Shows the country dial code, such as +91.
+     * @default true
+     */
     showDialCode?: boolean;
+    /**
+     * The control height.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg";
+    /**
+     * Extra classes on the field wrapper.
+     * @default ""
+     */
     fieldClassName?: string;
+    /** Extra classes on the phone control itself, not on the field wrapper. */
+    className?: string;
 } & import("react").RefAttributes<any>>;
 export default AppPhoneNumberInput;

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

@@ -6,35 +6,42 @@
  * `<app-popover>` uses Bootstrap's own popover, so both surfaces stay in lockstep.
  *
  * @param {object} props
- * @param {import('react').ReactElement} props.trigger The anchor element the panel opens from.
- *   Must be a single element that forwards a ref (a DOM element, or a react-bootstrap-based
- *   App* like AppButton/AppActionIcon). It renders as written; clicking (or hovering/focusing) it
- *   toggles the panel.
+ * @param {import('react').ReactElement} props.trigger
  * @param {import('react').ReactNode} props.children The panel body.
- * @param {string} [props.title] Optional panel title (plain text, not a heading, so it never breaks the page's heading order).
- * @param {'top'|'bottom'|'start'|'end'|'auto'} [props.placement='bottom'] Where it opens; `auto`
- *   flips to stay in view.
- * @param {'click'|'hover'|'focus'|('click'|'hover'|'focus')[]} [props.triggerType='click'] What
- *   opens it; pass an array for multiple (e.g. ['hover', 'focus']).
+ * @param {string} [props.title]
+ * @param {'top'|'bottom'|'start'|'end'|'auto'} [props.placement]
+ * @param {'click'|'hover'|'focus'|('click'|'hover'|'focus')[]} [props.triggerType]
  * @param {(show: boolean) => void} [props.onToggle] Callback fired when the panel opens/closes.
- * @param {string} [props.className] Class on the popover panel.
- * @param {boolean} [props.show] Controls the open state. When set, the panel follows it, and
- *   `onToggle` reports each request to change it.
- * @param {'dialog'} [props.role] `dialog` names the panel after `title` or `labelledBy`, sets
- *   `aria-modal="false"`, and lets Escape close it.
- * @param {string} [props.labelledBy] Id of the element that names a dialog panel; wins over `title`.
- * @param {boolean} [props.autoFocus=false] Moves focus into the panel on open and back to the trigger on close.
+ * @param {string} [props.className]
+ * @param {boolean} [props.show]
+ * @param {'dialog'} [props.role]
+ * @param {string} [props.labelledBy]
+ * @param {boolean} [props.autoFocus]
  */
 export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, show, role, labelledBy, autoFocus, ...rest }: {
+    /** The element the panel opens from. It must be a single element that forwards a ref, such as a plain element, AppButton or AppActionIcon. */
     trigger: import('react').ReactElement;
     children: import('react').ReactNode;
+    /** An optional panel title, plain text so it never breaks the page's heading order. */
     title?: string;
+    /**
+     * Where the panel opens. auto flips to stay in view.
+     * @default "bottom"
+     */
     placement?: 'top' | 'bottom' | 'start' | 'end' | 'auto';
     triggerType?: 'click' | 'hover' | 'focus' | ('click' | 'hover' | 'focus')[];
     onToggle?: (show: boolean) => void;
+    /** Extra classes on the popover panel. */
     className?: string;
+    /** Controls the open state. When set, the panel follows it. */
     show?: boolean;
+    /** dialog names the panel after the title or labelledBy, marks it not modal, and lets Escape close it. */
     role?: 'dialog';
+    /** The id of the element that names a dialog panel. It wins over the title. */
     labelledBy?: string;
+    /**
+     * Moves focus into the panel on open and back to the trigger on close.
+     * @default false
+     */
     autoFocus?: boolean;
 }): import("react").JSX.Element;

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

@@ -10,29 +10,48 @@
  * monthly/annual switch use `AppSegmented`.
  *
  * @param {object} props
- * @param {string} props.name Tier name.
- * @param {import('react').ReactNode} props.price Formatted amount, e.g. "₹1,499".
- * @param {string} [props.unit] Period suffix, e.g. "/month".
- * @param {string} [props.tagline] One line on who the tier is for.
+ * @param {string} props.name
+ * @param {import('react').ReactNode} props.price
+ * @param {string} [props.unit]
+ * @param {string} [props.tagline]
  * @param {{ text: string, included?: boolean }[]} [props.features]
- * @param {import('react').ReactNode} [props.cta] The action — usually an `AppButton`.
- * @param {boolean} [props.featured=false] The recommended tier: brand border, lifted, badged.
- * @param {boolean} [props.current=false] The tier the customer is already on.
- * @param {string} [props.badge='Most popular'] Text of the featured flag.
+ * @param {import('react').ReactNode} [props.cta]
+ * @param {boolean} [props.featured]
+ * @param {boolean} [props.current]
+ * @param {string} [props.badge]
  * @param {string} [props.className]
  */
 export default function AppPricingCard(props: {
+    /** The tier name. */
     name: string;
+    /** The formatted amount, such as ₹1,499. */
     price: import('react').ReactNode;
+    /** The period suffix after the price, such as /month. */
     unit?: string;
+    /** One line on who the tier is for. */
     tagline?: string;
+    /** The feature list. Every card in a row should list the same features in the same order. */
     features?: {
         text: string;
         included?: boolean;
     }[];
+    /** The call to action, usually an AppButton. */
     cta?: import('react').ReactNode;
+    /**
+     * Marks the recommended tier: brand border, lifted and badged.
+     * @default false
+     */
     featured?: boolean;
+    /**
+     * Marks the tier the customer is already on.
+     * @default false
+     */
     current?: boolean;
+    /**
+     * The text of the featured flag.
+     * @default "Most popular"
+     */
     badge?: string;
+    /** Extra classes on the card. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -4,26 +4,60 @@
  * `.progress` markup with a brand-toned fill, identical to the Razor `<app-progress>`.
  *
  * @param {object} props
- * @param {number} props.value Current amount (0…max); clamped into range. Ignored when `indeterminate`.
- * @param {number} [props.max=100]
- * @param {'info'|'success'|'warning'|'danger'|'neutral'} [props.tone='info'] Fill colour.
- * @param {'sm'|'md'} [props.size='md'] Bar thickness — sm is a thin 4px bar for inline/table use.
- * @param {string} [props.label] Accessible name for the bar; also shown above it when `showLabel`.
- * @param {boolean} [props.showLabel=false] Render the label text above the bar (ignored when indeterminate).
- * @param {boolean} [props.striped=false] Diagonal stripe overlay.
- * @param {boolean} [props.animated=false] Animate the stripes (implies striped).
- * @param {boolean} [props.indeterminate=false] Unknown-duration sweep; drops the value/label.
+ * @param {number} [props.value]
+ * @param {number} [props.max]
+ * @param {'info'|'success'|'warning'|'danger'|'neutral'} [props.tone]
+ * @param {'sm'|'md'} [props.size]
+ * @param {string} [props.label]
+ * @param {boolean} [props.showLabel]
+ * @param {boolean} [props.striped]
+ * @param {boolean} [props.animated]
+ * @param {boolean} [props.indeterminate]
  * @param {string} [props.className]
  */
 export default function AppProgress(props: {
-    value: number;
+    /**
+     * The current amount from 0 to max, clamped into range. Ignored when indeterminate.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The amount that counts as complete.
+     * @default 100
+     */
     max?: number;
+    /**
+     * The fill colour.
+     * @default "info"
+     */
     tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    /**
+     * The bar thickness. sm is a thin 4px bar for inline or table use.
+     * @default "md"
+     */
     size?: 'sm' | 'md';
+    /** The accessible name of the bar. It is also shown above the bar when showLabel is set. */
     label?: string;
+    /**
+     * Shows the label text above the bar. Ignored when indeterminate.
+     * @default false
+     */
     showLabel?: boolean;
+    /**
+     * A diagonal stripe overlay.
+     * @default false
+     */
     striped?: boolean;
+    /**
+     * Animates the stripes, which implies striped.
+     * @default false
+     */
     animated?: boolean;
+    /**
+     * An unknown-duration sweep that drops the value and the label.
+     * @default false
+     */
     indeterminate?: boolean;
+    /** Extra classes on the bar, or on the labelled wrapper when the label shows. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -11,18 +11,26 @@
  * long for a version 40 symbol throws.
  *
  * @param {object} props
- * @param {string} props.value The text to encode, such as a URL, an otpauth:// URI or a signed token.
- *   Nothing renders while it is empty.
- * @param {number} [props.size=240] Largest width and height in px. The code renders at the biggest
- *   whole number of pixels per module that fits.
- * @param {string} [props.title='QR code'] Accessible name. Say what scanning it does.
+ * @param {string} props.value
+ * @param {number} [props.size]
+ * @param {string} [props.title]
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
  */
 export default function AppQrCode(props: {
+    /** The text to encode, such as a link, an otpauth setup address or a signed token. Nothing renders while it is empty. */
     value: string;
+    /**
+     * The largest width and height in px. The code draws at the biggest whole number of pixels per module that fits.
+     * @default 240
+     */
     size?: number;
+    /**
+     * The accessible name. Say what scanning it does.
+     * @default "QR code"
+     */
     title?: string;
+    /** Extra classes on the code. */
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

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

@@ -1,14 +1,24 @@
 declare const AppRadio: import("react").ForwardRefExoticComponent<{
+    /** The visible label beside the radio. */
     label?: import('react').ReactNode;
+    /** The input's id. The label is bound to the input through it, and it is generated when left out. */
     id?: string;
+    /** The form field name. Radios that share a name form one group. */
     name?: string;
+    /** The value this radio posts when it is the chosen one. */
     value?: string;
+    /** Controlled chosen state; pair with onChange. */
     checked?: boolean;
+    /** Starting state when the radio is uncontrolled. */
     defaultChecked?: boolean;
+    /** Locks the radio and dims it. */
     disabled?: boolean;
     onChange?: (event: import('react').ChangeEvent<HTMLInputElement>) => void;
+    /** Error message, rendered below the control. Replaces the hint. */
     error?: string;
+    /** Helper text below the control. Hidden while an error is shown. */
     hint?: string;
+    /** Extra class on the form-check wrapper that holds the input, label and message. */
     className?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default AppRadio;