@webority/ui-react 0.88.1 → 0.89.0

package/dist/lib/wuiMarker.js

@@ -1 +1 @@
-var e=`data-wui`,t=`data-wui-props`,n=`__WUI_MARKERS__`,r=`props`,i=new Set([`children`,`className`,`style`,`id`,`key`,`ref`,`as`,`linkComponent`,`src`]),a=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`;function o(){return globalThis[n]===r}function s(n,r){let s={[e]:n};if(!o())return s;let c={};for(let[e,t]of Object.entries(r||{}))i.has(e)||e.startsWith(`aria-`)||e.startsWith(`data-`)||/^on[A-Z]/.test(e)||a(t)&&(c[e]=t);return s[t]=JSON.stringify(c),s}export{n as WUI_MARKERS_GLOBAL,r as WUI_MARKERS_PROPS_MODE,e as WUI_MARKER_ATTRIBUTE,t as WUI_MARKER_PROPS_ATTRIBUTE,s as wuiMarkerAttributes,o as wuiMarkerPropsOn};
+var e=`data-wui`,t=`data-wui-props`,n=`data-canvas`,r=`__WUI_MARKERS__`,i=`props`,a=new Set([`children`,`className`,`style`,`id`,`key`,`ref`,`as`,`linkComponent`,`src`]),o=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`;function s(){return globalThis[r]===i}function c(r,i){let c={[e]:r},l=i?.[n];if(typeof l==`string`&&l!==``&&(c[n]=l),!s())return c;let u={};for(let[e,t]of Object.entries(i||{}))a.has(e)||e.startsWith(`aria-`)||e.startsWith(`data-`)||/^on[A-Z]/.test(e)||o(t)&&(u[e]=t);return c[t]=JSON.stringify(u),c}export{n as WUI_CANVAS_KEY_ATTRIBUTE,r as WUI_MARKERS_GLOBAL,i as WUI_MARKERS_PROPS_MODE,e as WUI_MARKER_ATTRIBUTE,t as WUI_MARKER_PROPS_ATTRIBUTE,c as wuiMarkerAttributes,s as wuiMarkerPropsOn};

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

@@ -9,21 +9,31 @@
  *
  * @param {object} props
  * @param {{ key?: string, title: import('react').ReactNode, content: import('react').ReactNode, open?: boolean }[]} props.items
- * @param {boolean} [props.multiple=false] Allow more than one pane open at a time.
- * @param {string[]} [props.openItems] The keys of the items that are open. When set, it replaces each item's own open flag, and it is read again whenever its content changes. With multiple false only the first key opens.
- * @param {string} [props.id] Prefix for the generated pane ids. Set it when a pane
- *   needs a stable anchor to deep-link to; otherwise a unique one is generated.
+ * @param {boolean} [props.multiple]
+ * @param {string[]} [props.openItems]
+ * @param {string} [props.id]
  * @param {string} [props.className]
  */
 export default function AppAccordion(props: {
+    /** The panes, each with a title row and a content body. */
     items: {
         key?: string;
         title: import('react').ReactNode;
         content: import('react').ReactNode;
         open?: boolean;
     }[];
+    /**
+     * Allows more than one pane open at a time. Leave it off for a list the reader scans.
+     * @default false
+     */
     multiple?: boolean;
+    /** The keys of the panes that start open. It replaces each item's own open flag and is read again when its content changes. Without multiple only the first key opens. */
     openItems?: string[];
+    /** Prefix for the generated pane ids. Set it when a pane needs a stable anchor to link to. */
     id?: string;
+    /**
+     * Extra classes on the list.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -10,44 +10,69 @@
  * A camera on a defect or a paperclip on a ticket uses its file mode (`onFiles`).
  *
  * @param {object} props
- * @param {string|import('react').ReactNode} props.icon    glyph name (see Icon), or a custom node (e.g. an iconsax glyph)
- * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] iconsax
- *   style of a NAMED icon (AppIcon's `variant`). A node passed as `icon` is the caller's own glyph
- *   and is not restyled.
- * @param {string} props.label   accessible name + collision-aware hover/focus tooltip
- * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement='auto']  which side the
- *   tooltip prefers. `auto` (default) lets Popper pick the side with the most room; a named side
- *   is preferred but still flips to stay in view. Powered by `AppTooltip`, so it never clips.
- * @param {string} [props.shortcut]   the key that runs this action ("J", "E", "/"), drawn as a key chip in the tooltip
- *   after the label. Sets aria-keyshortcuts; the page binds the key itself (useListShortcuts). Needs a `label`, which supplies the tooltip.
- * @param {boolean} [props.danger]   destructive tint
+ * @param {string|import('react').ReactNode} props.icon
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant]
+ * @param {string} props.label
+ * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement]
+ * @param {string} [props.shortcut]
+ * @param {boolean} [props.danger]
  * @param {boolean} [props.disabled]
- * @param {number} [props.size=20]   glyph size in px; a numeric string is read as a number. The disc (and its hover tint) scales with it, keeping a constant 8px ring
+ * @param {number} [props.size]
  * @param {() => void} [props.onClick]
  * @param {string} [props.className]
  * @param {React.ElementType} [props.as]  render as something else — a router `Link`, `"a"`. When a
  *   `label` is set the control is the tooltip trigger, so `as` must FORWARD A REF to its DOM node
  *   for the tooltip (Popper) to anchor correctly — router `Link`s already do; a hand-rolled `as`
  *   wrapper must use `forwardRef` (the tooltip still opens without it, but may be mispositioned).
- * @param {string} [props.href]           sets an anchor without needing `as`.
+ * @param {string} [props.href]
  * @param {(files: File[]) => void} [props.onFiles]  turns the button into a file chooser: a hidden file input opens on click, Enter and Space, and the chosen files arrive here. The control is always a button in this mode.
- * @param {string} [props.accept]  file types the chooser offers (the input's accept), file mode only
- * @param {boolean} [props.multiple=false]  allow several files, file mode only
+ * @param {string} [props.accept]
+ * @param {boolean} [props.multiple]
  */
 export default function AppActionIcon(props: {
+    /** The glyph, given as a semantic icon name. */
     icon: string | import('react').ReactNode;
+    /** The iconsax style of a named icon. */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /** The accessible name of the control. It also shows as a tooltip on hover and focus. */
     label: string;
+    /**
+     * The side the tooltip prefers. Auto picks the side with the most room.
+     * @default "auto"
+     */
     tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
+    /** The key that runs this action, such as J or E. It is drawn as a key chip in the tooltip. */
     shortcut?: string;
+    /**
+     * A destructive tint.
+     * @default false
+     */
     danger?: boolean;
+    /**
+     * Turns the action off.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * The glyph size in px. The disc around it scales with it.
+     * @default 20
+     */
     size?: number;
     onClick?: () => void;
+    /**
+     * Extra classes on the control.
+     * @default ""
+     */
     className?: string;
     as?: React.ElementType;
+    /** Makes the action a link to this address. */
     href?: string;
     onFiles?: (files: File[]) => void;
+    /** The file types the chooser offers. File mode only. */
     accept?: string;
+    /**
+     * Allows several files. File mode only.
+     * @default false
+     */
     multiple?: boolean;
 }): any;

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

@@ -11,43 +11,76 @@
  *   `accent` adds the thick left edge that marks such an aside.
  *
  * @param {object} props
- * @param {"info"|"success"|"warning"|"danger"|"neutral"} [props.variant="info"] `neutral` is a plain notice in ink on a grey surface, with no semantic colour.
+ * @param {"info"|"success"|"warning"|"danger"|"neutral"} [props.variant]
  * @param {import('react').ReactNode} props.children The alert body.
- * @param {import('react').ReactNode} [props.title] A bold heading line above the body (`.alert-heading`).
- * @param {string|import('react').ReactNode} [props.icon] A leading glyph — a semantic icon name or a node. Defaults to the variant's badge glyph; pass `null` for none.
- * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of a
- *   named icon (the default badge glyph or an `icon` name). It does not touch an `icon` node or an `image`.
- * @param {number} [props.iconSize] The badge glyph's width and height in px. Unset, it follows `size`.
- * @param {string} [props.image] A custom image URL shown in the badge instead of the icon glyph (fills the circle).
- * @param {string} [props.imageAlt] Alt text for the custom image.
- * @param {number} [props.imageSize] Width and height of the image badge in px. Unset, it follows `size`.
+ * @param {import('react').ReactNode} [props.title]
+ * @param {string|import('react').ReactNode} [props.icon]
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant]
+ * @param {number} [props.iconSize]
+ * @param {string} [props.image]
+ * @param {string} [props.imageAlt]
+ * @param {number} [props.imageSize]
  * @param {string} [props.className]
  * @param {() => void} [props.onClose] Called when dismissed
- * @param {boolean} [props.dismissible] Show the close button (defaults to true when onClose is set)
- * @param {boolean} [props.bordered=true] Draw the soft variant border. `false` keeps only the tint fill.
- * @param {boolean} [props.accent=false] A thick variant-coloured left edge, marking the alert as an aside.
- * @param {"sm"|"md"|"lg"} [props.size="md"] `sm` is a compact single line; `lg` is roomier, with a larger
- *   heading, body and badge.
- * @param {import('react').ReactNode} [props.action] A trailing action pinned to the right — usually an `AppButton`.
- * @param {"alert"|"status"|"none"} [props.role="alert"] "status" for non-assertive notices; "none" for
- *   explanatory page content, which must not interrupt a screen reader.
+ * @param {boolean} [props.dismissible]
+ * @param {boolean} [props.bordered]
+ * @param {boolean} [props.accent]
+ * @param {"sm"|"md"|"lg"} [props.size]
+ * @param {import('react').ReactNode} [props.action]
+ * @param {"alert"|"status"|"none"} [props.role]
  */
 export default function AppAlert(props: {
+    /**
+     * The status tone. Neutral is a plain notice in ink on a grey surface, with no semantic colour.
+     * @default "info"
+     */
     variant?: "info" | "success" | "warning" | "danger" | "neutral";
     children: import('react').ReactNode;
+    /** A bold heading line above the body. */
     title?: import('react').ReactNode;
+    /** A leading glyph, given as a semantic icon name. It defaults to the glyph of the variant; pass null for no badge. */
     icon?: string | import('react').ReactNode;
+    /** The iconsax style of a named icon. It does not change an image. */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /** The badge glyph's width and height in px. Unset, it follows size. */
     iconSize?: number;
+    /** A custom image URL shown in the badge instead of the icon glyph. */
     image?: string;
+    /**
+     * Alt text for the custom image.
+     * @default ""
+     */
     imageAlt?: string;
+    /** Width and height of the image badge in px. Unset, it follows size. */
     imageSize?: number;
+    /**
+     * Extra classes on the alert.
+     * @default ""
+     */
     className?: string;
     onClose?: () => void;
+    /** Shows the close button. It is on by default when a close handler is set. */
     dismissible?: boolean;
+    /**
+     * Draws the soft border of the variant. False keeps only the tint fill.
+     * @default true
+     */
     bordered?: boolean;
+    /**
+     * A thick left edge in the variant colour, marking the alert as an aside.
+     * @default false
+     */
     accent?: boolean;
+    /**
+     * Sm is a compact single line. Lg is roomier, with a larger heading, body and badge.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg";
+    /** A trailing action pinned to the right, usually a button. */
     action?: import('react').ReactNode;
+    /**
+     * Status is for notices that must not interrupt a screen reader. None is for explanatory page content.
+     * @default "alert"
+     */
     role?: "alert" | "status" | "none";
 }): import("react").JSX.Element;

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

@@ -9,25 +9,35 @@
  * the loading state, which is the least surprising reading of "still in flight".
  *
  * @param {object} props
- * @param {boolean} [props.loading=false] Show the skeleton (or the progress line) instead of content.
- * @param {string|import('react').ReactNode} [props.error] An error to show in place of content.
- *   Falsy (including `null`/`undefined`) means no error.
- * @param {boolean} [props.empty=false] Show the empty state instead of content — the fetch
- *   succeeded with nothing to display.
+ * @param {boolean} [props.loading]
+ * @param {string|import('react').ReactNode} [props.error]
+ * @param {boolean} [props.empty]
  * @param {import('react').ReactNode} props.children Real content, shown once loaded,
  *   error-free and non-empty.
  * @param {() => void} [props.onRetry] Shown as a Retry button on the error state when set.
- * @param {import('react').ReactNode} [props.skeleton] Loading placeholder shaped like the
- *   content. Falls back to the thin indeterminate progress line at the top of the block when
- *   omitted.
- * @param {string} [props.className] Extra classes on the wrapper.
+ * @param {import('react').ReactNode} [props.skeleton]
+ * @param {string} [props.className]
  */
 export default function AppAsyncBlock(props: {
+    /**
+     * Shows the skeleton, or a thin progress line when there is none, instead of the content.
+     * @default false
+     */
     loading?: boolean;
+    /** An error to show in place of the content. A falsy value means no error. */
     error?: string | import('react').ReactNode;
+    /**
+     * Shows the empty state instead of the content, for a fetch that succeeded with nothing to display.
+     * @default false
+     */
     empty?: boolean;
     children: import('react').ReactNode;
     onRetry?: () => void;
+    /** A loading placeholder shaped like the content. Without it a thin indeterminate progress line shows. */
     skeleton?: import('react').ReactNode;
+    /**
+     * Extra classes on the wrapper.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,13 +1,16 @@
 import "@webority/ui-elements/elements/autocomplete";
 declare const AppAutocomplete: import("react").ForwardRefExoticComponent<{
+    /** The value of the selected option. */
     value?: string;
     onChange?: (value: string, meta?: {
         isCustom: boolean;
     }) => void;
+    /** The options to filter as the user types. Each has a value and a label. */
     options?: Array<{
         value: string;
         label: import('react').ReactNode;
     }>;
+    /** Text shown for the value when the options do not contain it, such as a selection loaded from the server. */
     valueLabel?: string;
     loadOptions?: (query: string, opts?: {
         signal?: AbortSignal;
@@ -15,20 +18,53 @@ declare const AppAutocomplete: import("react").ForwardRefExoticComponent<{
         value: string;
         label: string;
     }[]>;
+    /**
+     * Hint text shown in the empty field.
+     * @default "Search…"
+     */
     placeholder?: string;
+    /** The least number of characters typed before a remote search starts. The default is 1 in remote mode. */
     minChars?: number;
+    /** The wait in milliseconds before a remote search runs. The default is 250. */
     debounce?: number;
+    /**
+     * Turns the field off.
+     * @default false
+     */
     disabled?: boolean;
+    /** The control size. Leave it out for the default size. */
     size?: 'sm' | 'lg';
+    /**
+     * Offers the typed text as its own row when it matches no option, so a new value can be added.
+     * @default false
+     */
     allowCustom?: boolean;
+    /** The form name of the control. */
     name?: string;
+    /** The DOM id of the control and the target of the label. */
     id?: string;
+    /** The label shown above the field. */
     label?: import('react').ReactNode;
+    /** An error message shown under the field. */
     error?: string;
+    /** A hint shown under the field when there is no error. */
     hint?: string;
+    /**
+     * Marks the field as required, with the mark on the label.
+     * @default false
+     */
     required?: boolean;
+    /** 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;
+    /**
+     * Extra classes on the field wrapper.
+     * @default ""
+     */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppAutocomplete;

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

@@ -4,38 +4,74 @@
  * @param {object} props
  * @param {string} [props.name]
  * @param {string} [props.src]
- * @param {"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|number|string} [props.size="md"]  Preset, or a custom pixel size.
- * @param {"circle"|"rounded"|"square"} [props.shape="circle"]
- * @param {"primary"|"neutral"|"success"|"warning"|"danger"|"info"|"auto"} [props.tone="primary"]  `auto` = stable per-name colour.
- * @param {"none"|"online"|"offline"|"away"|"busy"} [props.status="none"]  A presence dot.
- * @param {boolean} [props.ring=false]  A ring around the disc.
- * @param {string} [props.label]  Text shown as a tooltip above the avatar on hover/focus.
- * @param {string|import('react').ReactNode} [props.icon]  Fallback face used instead of initials when there's no photo: a library icon name, or any React node (a product's own glyph), drawn as given.
- * @param {"linear"|"outline"|"bold"|"bulk"|"broken"|"twotone"} [props.iconVariant="linear"]  The iconsax style of a named `icon`; a node icon is drawn as given.
- * @param {import('react').ReactNode} [props.badge]  A small count/marker in the top-right corner.
- * @param {string} [props.href]  Makes the avatar a link.
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|number|string} [props.size]
+ * @param {"circle"|"rounded"|"square"} [props.shape]
+ * @param {"primary"|"neutral"|"success"|"warning"|"danger"|"info"|"auto"} [props.tone]
+ * @param {"none"|"online"|"offline"|"away"|"busy"} [props.status]
+ * @param {boolean} [props.ring]
+ * @param {string} [props.label]
+ * @param {string|import('react').ReactNode} [props.icon]
+ * @param {"linear"|"outline"|"bold"|"bulk"|"broken"|"twotone"} [props.iconVariant]
+ * @param {import('react').ReactNode} [props.badge]
+ * @param {string} [props.href]
  * @param {(e) => void} [props.onClick]  Makes the avatar a button (when no href).
  * @param {import('react').ElementType} [props.linkComponent]  Router link; receives `to` instead of `href`.
- * @param {string} [props.tooltip]  A collision-aware hover/focus tooltip (via AppTooltip / Popper) — flips to stay on-screen. Distinct from `label`, which is the fixed CSS bubble.
- * @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]
  * @param {string} [props.className]
  */
 export default function AppAvatar(props: {
+    /** The person's name. Used for the initials fallback and the image alt text. */
     name?: string;
+    /** The profile photo URL, usually a data or object URL. When set, the photo shows over the initials. */
     src?: string;
+    /**
+     * A preset from xs to 2xl, or a custom pixel size as a number or any CSS length.
+     * @default "md"
+     */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number | string;
+    /**
+     * The disc shape.
+     * @default "circle"
+     */
     shape?: "circle" | "rounded" | "square";
+    /**
+     * The colour of the initials face. auto gives each name a stable colour.
+     * @default "primary"
+     */
     tone?: "primary" | "neutral" | "success" | "warning" | "danger" | "info" | "auto";
+    /**
+     * A presence dot at the lower right.
+     * @default "none"
+     */
     status?: "none" | "online" | "offline" | "away" | "busy";
+    /**
+     * A ring around the avatar.
+     * @default false
+     */
     ring?: boolean;
+    /** Text shown as a tooltip above the avatar on hover or focus. It is also the accessible name of a link or button avatar. */
     label?: string;
+    /** The face shown instead of initials when there is no photo: a library icon name or any node. */
     icon?: string | import('react').ReactNode;
+    /**
+     * The icon style of a named icon. A node icon is drawn as given.
+     * @default "linear"
+     */
     iconVariant?: "linear" | "outline" | "bold" | "bulk" | "broken" | "twotone";
+    /** A small count or marker in the top-right corner. */
     badge?: import('react').ReactNode;
+    /** Makes the avatar a link. */
     href?: string;
     onClick?: (e: any) => void;
     linkComponent?: import('react').ElementType;
+    /** A tooltip on hover or focus that flips to stay on screen. Distinct from label, which is a fixed bubble. */
     tooltip?: string;
+    /**
+     * The preferred tooltip side. auto picks the side with the most room.
+     * @default "auto"
+     */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
+    /** Extra classes on the avatar. */
     className?: string;
 }): any;

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

@@ -8,15 +8,25 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children The `AppAvatar`s to overlap.
- * @param {"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|number|string} [props.size] Sizes the whole row at once. It sets `--avatar-size` on the group, which each avatar and the "+N" chip inherit; a child with its own size still wins.
- * @param {"tight"|"normal"|"loose"} [props.spacing="normal"] How far the avatars overlap.
- * @param {number|string} [props.overflow] The hidden count, shown as a "+N" chip after the avatars. Zero or unset shows no chip.
- * @param {string} [props.className=""] Extra classes on the group.
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|number|string} [props.size]
+ * @param {"tight"|"normal"|"loose"} [props.spacing]
+ * @param {number|string} [props.overflow]
+ * @param {string} [props.className]
  */
 export default function AppAvatarGroup(props: {
     children: import('react').ReactNode;
+    /** Sizes the whole row at once. Each avatar and the +N chip inherit it; an avatar with its own size still wins. */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number | string;
+    /**
+     * How far the avatars overlap.
+     * @default "normal"
+     */
     spacing?: "tight" | "normal" | "loose";
+    /** The hidden count, shown as a +N chip after the avatars. Zero or unset shows no chip. */
     overflow?: number | string;
+    /**
+     * Extra classes on the group.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -6,50 +6,81 @@ import "@webority/ui-elements/elements/image-crop";
  * (PNG where the browser cannot encode WebP).
  *
  * @param {object} props
- * @param {string|null} [props.value] Current photo URL, or null.
- * @param {string} [props.initials] Shown when there is no photo; a person icon otherwise.
+ * @param {string|null} [props.value]
+ * @param {string} [props.initials]
  * @param {(file: File) => void} props.onPick Receives the cropped square photo.
  * @param {() => void} [props.onRemove] Shows Remove while there is a photo; called when it is pressed.
- * @param {string} [props.name] Form field name: the cropped photo is written into the file input,
- *   so an uncontrolled form posts it.
- * @param {string} [props.removeName] Form field that posts `true` once Remove is pressed (and
- *   shows Remove while there is a photo).
- * @param {string} [props.accept] Types the person may choose. Defaults to JPG, PNG, WebP and HEIC
- *   (HEIC opens only where the browser can decode it; elsewhere the dialog says so).
- * @param {number} [props.maxSizeMb=10] Limit on the chosen photo; 0 means none. The saved crop is
- *   far smaller.
- * @param {number} [props.outputSize=512] Width and height of the saved square, in px.
- * @param {'sm'|'md'|'lg'|number} [props.size='md'] Photo diameter: a preset or px.
+ * @param {string} [props.name]
+ * @param {string} [props.removeName]
+ * @param {string} [props.accept]
+ * @param {number} [props.maxSizeMb]
+ * @param {number} [props.outputSize]
+ * @param {'sm'|'md'|'lg'|number} [props.size]
  * @param {string} [props.label]
  * @param {string} [props.hint]
- * @param {string} [props.error] Caller error; wins over a rejection reason.
- * @param {boolean} [props.required=false]
- * @param {boolean} [props.loading=false] Spinner on the photo and every action blocked while it uploads.
- * @param {boolean} [props.disabled=false]
- * @param {string} [props.ariaLabel] Accessible name of the photo button; defaults to the action's words.
- * @param {string} [props.className] Extra class on the picker (photo and actions).
- * @param {string} [props.fieldClassName] Extra class on the `.field` wrapper.
+ * @param {string} [props.error]
+ * @param {boolean} [props.required]
+ * @param {boolean} [props.loading]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.ariaLabel]
+ * @param {string} [props.className]
+ * @param {string} [props.fieldClassName]
  * @param {object} [props.style] Inline style; lands on the picker with `className`.
  */
 export default function AppAvatarPicker(props: {
+    /** The current photo URL, or null when there is none. */
     value?: string | null;
+    /** Shown when there is no photo. A person icon shows when it is empty. */
     initials?: string;
     onPick: (file: File) => void;
     onRemove?: () => void;
+    /** The form field name. The cropped photo is written into the file input, so an uncontrolled form posts it. */
     name?: string;
+    /** A form field that posts true once Remove is pressed. It also shows Remove while there is a photo. */
     removeName?: string;
+    /** The file types a person may choose. Defaults to JPG, PNG, WebP and HEIC; HEIC opens only where the browser can decode it. */
     accept?: string;
+    /**
+     * The size limit of the chosen photo in megabytes. 0 means no limit.
+     * @default 10
+     */
     maxSizeMb?: number;
+    /**
+     * The width and height of the saved square, in pixels.
+     * @default 512
+     */
     outputSize?: number;
+    /**
+     * The photo diameter: sm, md or lg, or a number of pixels.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg' | number;
+    /** The text shown above the picker. */
     label?: string;
+    /** Help text shown below the picker. An error replaces it. */
     hint?: string;
+    /** An error message shown below the picker. It wins over a rejection reason. */
     error?: string;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * Shows a spinner on the photo and blocks every action while a photo uploads.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Blocks every action.
+     * @default false
+     */
     disabled?: boolean;
+    /** The accessible name of the photo button. Defaults to the words of the action. */
     ariaLabel?: string;
+    /** Extra class on the picker (the photo and its actions). */
     className?: string;
+    /** Extra class on the field wrapper. */
     fieldClassName?: string;
     style?: object;
 }): import("react").JSX.Element;

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

@@ -8,16 +8,27 @@
  * @param {object} props
  * @param {import('react').ReactNode} props.children
  * @param {"neutral"|"primary"|"success"|"warning"|"danger"|"info"} [props.tone]
- * @param {boolean} [props.dot=false]
- * @param {string} [props.tooltip] A collision-aware hover/focus tooltip (via AppTooltip / Popper) — flips to stay on-screen.
- * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] Preferred tooltip side; `auto` picks the side with the most room.
+ * @param {boolean} [props.dot]
+ * @param {string} [props.tooltip]
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement]
  * @param {string} [props.className]
  */
 export default function AppBadge(props: {
     children: import('react').ReactNode;
+    /** The badge colour. */
     tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+    /**
+     * Shows the badge in its compact dot style.
+     * @default false
+     */
     dot?: boolean;
+    /** A tooltip on hover or focus that flips to stay on screen. */
     tooltip?: string;
+    /**
+     * The preferred tooltip side. auto picks the side with the most room.
+     * @default "auto"
+     */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
+    /** Extra classes on the badge. */
     className?: string;
 }): any;

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

@@ -5,18 +5,28 @@
  * toast is a transient pop; a banner is persistent, full-bleed, and page-scoped.
  *
  * @param {object} props
- * @param {'info'|'success'|'warning'|'danger'|'neutral'} [props.tone='info'] The banner's colour/intent.
- * @param {string|import('react').ReactNode} [props.icon] A leading icon — a glyph name or a node.
+ * @param {'info'|'success'|'warning'|'danger'|'neutral'} [props.tone]
+ * @param {string|import('react').ReactNode} [props.icon]
  * @param {import('react').ReactNode} props.children The message; may include an inline action link.
- * @param {boolean} [props.dismissible=false] Show a close button that removes the banner.
+ * @param {boolean} [props.dismissible]
  * @param {() => void} [props.onDismiss] Called after the banner is dismissed.
  * @param {string} [props.className]
  */
 export default function AppBanner(props: {
+    /**
+     * The colour and intent of the banner.
+     * @default "info"
+     */
     tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** A leading icon: a library icon name or any node. */
     icon?: string | import('react').ReactNode;
     children: import('react').ReactNode;
+    /**
+     * Shows a close button that removes the banner.
+     * @default false
+     */
     dismissible?: boolean;
     onDismiss?: () => void;
+    /** Extra classes on the banner. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -12,13 +12,12 @@ export declare const BreadcrumbTrailContext: import("react").Context<boolean>;
  * never imports a router.
  *
  * @param {object} props
- * @param {{ key?: string, label: string, href?: string, to?: string,
- *   icon?: string|import('react').ReactNode }[]} props.items The trail, root first, current
- *   page last. An item links when it has `href`/`to`, unless it is the current page.
+ * @param {{ key?: string, label: string, href?: string, to?: string, icon?: string|import('react').ReactNode }[]} props.items
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
  * @param {string} [props.className]
  */
 export default function AppBreadcrumbs(props: {
+    /** The trail, root first, current page last. An item links when it has `href` or `to`, unless it is the current page. */
     items: {
         key?: string;
         label: string;
@@ -27,5 +26,6 @@ export default function AppBreadcrumbs(props: {
         icon?: string | import('react').ReactNode;
     }[];
     linkComponent?: import('react').ElementType;
+    /** Extra classes on the trail. */
     className?: string;
 }): import("react").JSX.Element;