@webority/ui-react 0.88.1 → 0.89.0

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

@@ -1,22 +1,54 @@
 import "@webority/ui-elements/elements/datepicker";
 declare const AppDatePicker: import("react").ForwardRefExoticComponent<{
+    /** ISO date string. */
     value?: string;
     onChange?: (value: string) => void;
+    /** The field label, shown above the control and used as its accessible name. */
     label?: string;
+    /**
+     * Marks the field required, with the required mark on the label.
+     * @default false
+     */
     required?: boolean;
+    /** Help text shown under the control. */
     hint?: string;
+    /** An error message shown under the control. */
     error?: string;
+    /** The form field name the ISO date posts under. */
     name?: string;
+    /** The earliest selectable date, as an ISO date string. */
     min?: string;
+    /** The latest selectable date, as an ISO date string. */
     max?: string;
+    /**
+     * Text shown in the field while no date is chosen.
+     * @default "Choose a date"
+     */
     placeholder?: string;
+    /** Disables the control. */
     disabled?: boolean;
+    /** Control height tier, matching AppInput. */
     size?: 'sm' | 'md' | 'lg';
+    /** First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it follows the theme's --wui-first-day token, which is 1 (Monday) unless the product sets it. */
     firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * How the chosen date reads in the field, from the tokens yyyy, MMMM, MMM, MM, dd and d (for example dd/MM/yyyy). The onChange value stays ISO.
+     * @default "dd-MMM-yyyy"
+     */
     displayFormat?: string;
+    /** The id of the control; a unique one is made when left out. */
     id?: string;
+    /** Accessible name when there is no visible label. */
     ariaLabel?: string;
+    /**
+     * Classes for the wui-datepicker control itself.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Classes for the field wrapper that holds the label, hint and error.
+     * @default ""
+     */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppDatePicker;

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

@@ -1,31 +1,62 @@
 import "@webority/ui-elements/elements/date-range";
 declare const AppDateRangePicker: import("react").ForwardRefExoticComponent<{
+    /** Range start as an ISO date string (YYYY-MM-DD). */
     start?: string;
+    /** Range end as an ISO date string (YYYY-MM-DD). */
     end?: string;
     onChange?: (range: {
         start: string;
         end: string;
     }) => void;
+    /** The field label, shown above the control and used as its accessible name. */
     label?: string;
+    /**
+     * Marks the field required, with the required mark on the label.
+     * @default false
+     */
     required?: boolean;
+    /** Help text shown under the control. */
     hint?: string;
+    /** An error message shown under the control. */
     error?: string;
+    /** Form field name the start date posts under. */
     startName?: string;
+    /** Form field name the end date posts under. */
     endName?: string;
+    /** The earliest selectable date, as an ISO date string. */
     min?: string;
+    /** The latest selectable date, as an ISO date string. */
     max?: string;
+    /**
+     * Text shown in the field while no range is chosen.
+     * @default "Start to End"
+     */
     placeholder?: string;
+    /** Disables the control. */
     disabled?: boolean;
+    /** Control height tier, matching AppInput. */
     size?: 'sm' | 'md' | 'lg';
+    /** First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it follows the theme's --wui-first-day token, which is 1 (Monday) unless the product sets it. */
     firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Quick ranges, listed beside the calendar (above it on a phone); picking one fills the range and closes the calendar. An item is a name (today, yesterday, last7Days, last30Days, thisMonth, lastMonth or thisFinancialYear, resolved against today in IST) or { label, start, end } with ISO dates. */
     presets?: (('today' | 'yesterday' | 'last7Days' | 'last30Days' | 'thisMonth' | 'lastMonth' | 'thisFinancialYear') | {
         label: string;
         start: string;
         end: string;
     })[];
+    /** The id of the control; a unique one is made when left out. */
     id?: string;
+    /** Accessible name when there is no visible label. */
     ariaLabel?: string;
+    /**
+     * Class to apply to the control element.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Class to apply to the wrapper field div.
+     * @default ""
+     */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppDateRangePicker;

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

@@ -8,16 +8,15 @@
  *
  * @param {object} props
  * @param {{ label: string, value: import('react').ReactNode, span?: 1|2|3, key?: string, emphasis?: boolean }[]} props.items
- *   The rows — each with a label and a value. A `span` of 2 or 3 makes the item span multiple columns.
- *   `emphasis` marks the total row: bold, with a rule above.
- * @param {1|2|3} [props.columns=2] How many columns the grid should have (before media-breakpoint collapse).
- * @param {"sm"|"md"} [props.size="md"] Item padding / font size.
- * @param {boolean} [props.bordered=false] Add horizontal dividing lines between rows.
- * @param {"grid"|"summary"} [props.layout="grid"] `summary` puts each label left of its value, with tabular figures.
- * @param {import('react').ReactNode} [props.title] Optional heading above the grid.
- * @param {string} [props.className] Extra classes on the grid container.
+ * @param {1|2|3} [props.columns]
+ * @param {"sm"|"md"} [props.size]
+ * @param {boolean} [props.bordered]
+ * @param {"grid"|"summary"} [props.layout]
+ * @param {import('react').ReactNode} [props.title]
+ * @param {string} [props.className]
  */
 export default function AppDescriptions(props: {
+    /** The rows, each with a label and a value. A span of 2 or 3 makes the item span multiple columns, and emphasis marks the total row. */
     items: {
         label: string;
         value: import('react').ReactNode;
@@ -25,10 +24,31 @@ export default function AppDescriptions(props: {
         key?: string;
         emphasis?: boolean;
     }[];
+    /**
+     * How many columns the grid should have, before the media-breakpoint collapse.
+     * @default 2
+     */
     columns?: 1 | 2 | 3;
+    /**
+     * Item padding and font size.
+     * @default "md"
+     */
     size?: "sm" | "md";
+    /**
+     * Adds horizontal dividing lines between rows.
+     * @default false
+     */
     bordered?: boolean;
+    /**
+     * summary puts each label left of its value, with tabular figures.
+     * @default "grid"
+     */
     layout?: "grid" | "summary";
+    /** Optional heading above the grid. */
     title?: import('react').ReactNode;
+    /**
+     * Extra classes on the grid container.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -10,41 +10,82 @@ import "@webority/ui-elements/elements/drawer";
  * viewport.
  *
  * @param {object} props
- * @param {boolean} [props.open=false]
+ * @param {boolean} [props.open]
  * @param {() => void} [props.onClose] Called when the backdrop, Escape, the close button or a drag
  *   down asks to close it. It stays open until `open` becomes false.
- * @param {string} [props.title] The heading, and the dialog's accessible name.
- * @param {string} [props.subtitle] A line under the title.
- * @param {string} [props.ariaLabel] The dialog's accessible name when there is no `title`.
- * @param {'end'|'start'} [props.side="end"] Which edge the side drawer slides from.
- * @param {'sm'|'md'|'lg'} [props.size="md"] The side drawer's width: 360, 480 or 640 px.
- * @param {number[]} [props.snapPoints=[50, 90]] The sheet's resting heights, each 10 to 100 percent of the screen.
- * @param {number} [props.defaultSnap=0] Which of the sorted snap points it opens on.
+ * @param {string} [props.title]
+ * @param {string} [props.subtitle]
+ * @param {string} [props.ariaLabel]
+ * @param {'end'|'start'} [props.side]
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {number[]} [props.snapPoints]
+ * @param {number} [props.defaultSnap]
  * @param {(index: number, percent: number) => void} [props.onSnapChange] Called when the sheet moves to another point.
- * @param {boolean} [props.dismissible=true] Show the close button.
- * @param {boolean} [props.staticBackdrop=false] The backdrop, Escape and a drag down no longer close it; only the close button or `open` can.
- * @param {string} [props.confirmDiscard] Ask before closing while dirty: this text, with Discard and Keep editing in the footer.
- * @param {boolean} [props.dirty=false] True while a field differs from its loaded value; the caller owns it.
- * @param {import('react').ReactNode} [props.footer] Pinned below the scrolling body.
+ * @param {boolean} [props.dismissible]
+ * @param {boolean} [props.staticBackdrop]
+ * @param {string} [props.confirmDiscard]
+ * @param {boolean} [props.dirty]
+ * @param {import('react').ReactNode} [props.footer]
  * @param {string} [props.className]
  * @param {import('react').ReactNode} props.children
  */
 export default function AppDrawer(props: {
+    /**
+     * Whether the drawer is open. The caller owns it and closes it in onClose.
+     * @default false
+     */
     open?: boolean;
     onClose?: () => void;
+    /** The heading, and the dialog's accessible name. */
     title?: string;
+    /** A line under the title. */
     subtitle?: string;
+    /** The dialog's accessible name when there is no title. */
     ariaLabel?: string;
+    /**
+     * Which edge the side drawer slides from.
+     * @default "end"
+     */
     side?: 'end' | 'start';
+    /**
+     * The side drawer's width: 360, 480 or 640 px.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * The sheet's resting heights, each 10 to 100 percent of the screen.
+     * @default [50,90]
+     */
     snapPoints?: number[];
+    /**
+     * Which of the sorted snap points it opens on.
+     * @default 0
+     */
     defaultSnap?: number;
     onSnapChange?: (index: number, percent: number) => void;
+    /**
+     * Show the close button.
+     * @default true
+     */
     dismissible?: boolean;
+    /**
+     * The backdrop, Escape and a drag down no longer close it; only the close button or open can.
+     * @default false
+     */
     staticBackdrop?: boolean;
+    /** Ask before closing while dirty: this text, with Discard and Keep editing in the footer. */
     confirmDiscard?: string;
+    /**
+     * True while a field differs from its loaded value; the caller owns it.
+     * @default false
+     */
     dirty?: boolean;
+    /** Pinned below the scrolling body. */
     footer?: import('react').ReactNode;
+    /**
+     * Extra classes on the drawer element.
+     * @default ""
+     */
     className?: string;
     children: import('react').ReactNode;
 }): import("react").JSX.Element;

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

@@ -8,30 +8,53 @@
  * @param {(file: File | File[]) => void} props.onChange Single mode: the validated File. Multiple
  *   mode: the validated Files of that pick or drop. Not called when nothing passes validation.
  * @param {string} [props.label]
- * @param {string} [props.id] DOM id for the file input and its label's `for` target.
- * @param {boolean} [props.multiple=false] Take several files per pick or drop; `onChange` gets an array.
- * @param {string} [props.accept=""] Accepted file types (the `accept` attribute). Empty takes any file.
- * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB. 0 means no size
- *   limit: nothing is rejected for its size, and the hint names no size.
- * @param {string} [props.error] Message below the zone; also styles the zone as errored.
- * @param {string} [props.hint] Helper text below the zone; an error (the caller's or a rejected
- *   pick's) replaces it while it shows.
- * @param {boolean} [props.disabled=false] Blocks click and drop.
- * @param {string} [props.className] Class to apply to the control element, the visible zone.
- * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
+ * @param {string} [props.id]
+ * @param {boolean} [props.multiple]
+ * @param {string} [props.accept]
+ * @param {number} [props.maxSizeMb]
+ * @param {string} [props.error]
+ * @param {string} [props.hint]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.className]
+ * @param {string} [props.fieldClassName]
  * @param {object} [props.style] Inline style; lands on the control with `className`.
  */
 export default function AppDropZone(props: {
     onChange: (file: File | File[]) => void;
+    /** Text of the label above the zone. */
     label?: string;
+    /** DOM id for the file input and the target of its label's for attribute. */
     id?: string;
+    /**
+     * Take several files per pick or drop; the change handler then gets an array of files.
+     * @default false
+     */
     multiple?: boolean;
+    /**
+     * Accepted file types, written as the accept attribute is. Empty takes any file.
+     * @default ""
+     */
     accept?: string;
+    /** Largest file size in megabytes, the shared limit when left out. 0 means no size limit: nothing is rejected for its size, and the hint names no size. */
     maxSizeMb?: number;
+    /** Message below the zone; also styles the zone as errored. */
     error?: string;
+    /** Helper text below the zone; an error, the caller's or a rejected pick's, replaces it while it shows. */
     hint?: string;
+    /**
+     * Blocks click and drop.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Class to apply to the control element, the visible zone.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Class to apply to the wrapper field div.
+     * @default ""
+     */
     fieldClassName?: string;
     style?: object;
 }): import("react").JSX.Element;

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

@@ -9,20 +9,13 @@
  * the parity check reads the first signature it finds as the component's public props.
  *
  * @param {object} props
- * @param {string} props.icon
+ * @param {string} [props.icon]
  * @param {number} [props.iconSize]
  * @param {string} [props.toggleClassName]
- * @param {string} [props.label] Tooltip + accessible-name fallback for the toggle.
- * @param {"start"|"end"} [props.align="end"] Menu alignment.
+ * @param {string} [props.label]
+ * @param {"start"|"end"} [props.align]
  * @param {string} [props.ariaLabel]
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: true, header?: string, hiddenFrom?: 'sm'|'md'|'lg'|'xl' }[]} [props.items]
- *   `icon` is a glyph name OR a custom node (e.g. an iconsax glyph); `image` is a picture URL (external logo/avatar) — pass one.
- *   `shortcut` is the key that runs the item ("E"), drawn as a key chip at the end of the row; the
- *   page binds the key itself (useListShortcuts).
- *   An item with `divider: true` renders a separator instead of an action; it needs no
- *   `label`/`onClick`, just a unique `key`.
- *   An item with `header` renders a small group heading (`<div class="dropdown-header">`) instead of an action;
- *   it needs no `label`/`onClick`, just a unique `key`.
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: boolean, header?: string, hiddenFrom?: 'sm'|'md'|'lg'|'xl' }[]} [props.items]
  * @param {string} [props.menuClassName]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
  * @param {import('react').ReactNode} [props.children] Rich menu content — renders inside the
@@ -30,25 +23,33 @@
  *   block, a form, mixed content). `items` and `children` are mutually exclusive; `children`
  *   wins when both are given. The icon toggle and react-bootstrap's open/close, outside-click,
  *   focus and Escape behavior are unchanged either way.
- * @param {import('react').ReactNode} [props.trigger] A custom trigger — renders inside the
- *   toggle button INSTEAD of the icon, for a rich control (an account chip with avatar+name, a
- *   "Sort by ▾" labeled button). Wins over `icon`. The button still owns react-bootstrap's
- *   ref/onClick/`aria-expanded` and keyboard behavior, so a11y is unchanged. Razor counterpart:
- *   the `<app-dropdown-toggle>` child slot.
- * @param {boolean} [props.show] Controlled open state. Leave it unset and the menu manages its own;
- *   set it and the caller owns it, updating it from `onToggle`.
+ * @param {import('react').ReactNode} [props.trigger]
+ * @param {boolean} [props.show]
  * @param {(nextShow: boolean, meta: { source?: string, originalEvent?: Event }) => void} [props.onToggle]
  *   Called whenever the menu asks to open or close: a toggle click, an outside click, Escape, an item
  *   pick (react-bootstrap's `source`), and the close on a scroll that moves the toggle or a window
  *   resize (`source` "scroll" or "resize"). Fires in both modes.
  */
 export default function AppDropdown(props: {
-    icon: string;
+    /** Name of the glyph on the toggle button. A custom trigger replaces it. */
+    icon?: string;
+    /** Size of the toggle glyph in pixels. */
     iconSize?: number;
+    /** Class for the toggle button, replacing the default toggle look. */
     toggleClassName?: string;
+    /** Tooltip and accessible name fallback for the toggle. */
     label?: string;
+    /**
+     * Which edge of the toggle the menu lines up with.
+     * @default "end"
+     */
     align?: "start" | "end";
+    /** Accessible name of the toggle; it wins over label. */
     ariaLabel?: string;
+    /**
+     * The menu rows, used when there are no children. A row is an action, a divider or a group heading; a divider or heading needs only a unique key.
+     * @default []
+     */
     items?: {
         key: string;
         label?: string;
@@ -58,14 +59,20 @@ export default function AppDropdown(props: {
         onClick?: () => void;
         danger?: boolean;
         shortcut?: string;
-        divider?: true;
+        divider?: boolean;
         header?: string;
         hiddenFrom?: 'sm' | 'md' | 'lg' | 'xl';
     }[];
+    /**
+     * Class for the menu panel.
+     * @default ""
+     */
     menuClassName?: string;
     linkComponent?: import('react').ElementType;
     children?: import('react').ReactNode;
+    /** A custom trigger drawn inside the toggle button instead of the icon, such as an account chip or a labelled sort button. It wins over icon. The button keeps its open state, keyboard behavior and accessible role. */
     trigger?: import('react').ReactNode;
+    /** Controlled open state. Leave it out and the menu manages its own; set it and the caller owns it, updating it from the toggle handler. */
     show?: boolean;
     onToggle?: (nextShow: boolean, meta: {
         source?: string;

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

@@ -4,16 +4,27 @@
  * Dates are read in India Standard Time. The Razor `<app-due-date>` renders the same markup and classes.
  *
  * @param {object} props
- * @param {Date} [props.date] The due date.
- * @param {number} [props.soonDays] Within this many days of the date, the text reads "N days left" in warning.
- * @param {boolean} [props.overdue=false] Set by the caller from its own rule. Done items are never overdue.
- * @param {string} [props.overdueLabel] Replaces the date text when overdue, for example "Validity ended".
+ * @param {string|number|Date} [props.date]
+ * @param {number} [props.soonDays]
+ * @param {boolean} [props.overdue]
+ * @param {string} [props.overdueLabel]
  * @param {string} [props.className]
  */
 export default function AppDueDate(props: {
-    date?: Date;
+    /** The due date: an ISO date or date-time string, or epoch milliseconds, read in India Standard Time. */
+    date?: string | number | Date;
+    /** Within this many days of the date, the text reads "N days left" in warning. */
     soonDays?: number;
+    /**
+     * Set by the caller from its own rule. Done items are never overdue.
+     * @default false
+     */
     overdue?: boolean;
+    /** Replaces the date text when overdue, for example "Validity ended". */
     overdueLabel?: string;
+    /**
+     * Extra class on the due date element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -10,25 +10,41 @@
  * the tighter widget/tile variant (smaller title + text).
  *
  * @param {object} props
- * @param {string|import('react').ReactNode} [props.icon]  Semantic icon name for the bubble, or a custom node.
- *   Needed unless `illustration` is set, which replaces the bubble.
- * @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 {number} [props.iconSize=24]
- * @param {"md"|"sm"} [props.size="md"]
+ * @param {string|import('react').ReactNode} [props.icon]
+ * @param {string|import('react').ReactNode} [props.illustration]
+ * @param {number} [props.iconSize]
+ * @param {"md"|"sm"} [props.size]
  * @param {import('react').ReactNode} props.title
  * @param {import('react').ReactNode} [props.text]
- * @param {import('react').ReactNode} [props.action]  usually an AppButton
+ * @param {import('react').ReactNode} [props.action]
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
  */
 export default function AppEmptyState(props: {
+    /** Semantic icon name for the bubble, or a custom node. Needed unless illustration is set, which replaces the bubble. */
     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. Replaces the icon bubble when set. */
     illustration?: string | import('react').ReactNode;
+    /**
+     * Size of the icon in the bubble, in pixels.
+     * @default 24
+     */
     iconSize?: number;
+    /**
+     * The type scale: md is the page or card empty state, sm is the tighter widget or tile variant with a smaller title and text.
+     * @default "md"
+     */
     size?: "md" | "sm";
+    /** The headline of the empty state. */
     title: import('react').ReactNode;
+    /** Body text under the title. */
     text?: import('react').ReactNode;
+    /** The next step shown below the text, usually an AppButton. */
     action?: import('react').ReactNode;
+    /**
+     * Extra class on the empty state wrapper.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

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

@@ -6,20 +6,33 @@
  * rather than from the Save button.
  *
  * @param {object} props
- * @param {{ field: string, message: string }[]} [props.errors] `field` is the input's id or name.
- * @param {import('react').ReactNode} [props.title] Heading. Defaults to "Fix N field(s) to continue".
- * @param {boolean} [props.autoFocus=true] Take focus when errors appear. Turn off only where the
- *   summary is shown for reference, such as documentation, never on a form.
+ * @param {{ field: string, message: string }[]} [props.errors]
+ * @param {import('react').ReactNode} [props.title]
+ * @param {boolean} [props.autoFocus]
  * @param {string} [props.id]
  * @param {string} [props.className]
  */
 export default function AppErrorSummary(props: {
+    /**
+     * The errors to list; the summary renders nothing while it is empty.
+     * @default []
+     */
     errors?: {
         field: string;
         message: string;
     }[];
+    /** Heading of the summary. Defaults to "Fix N field(s) to continue". */
     title?: import('react').ReactNode;
+    /**
+     * Take focus when errors appear. Turn off only where the summary is shown for reference, such as documentation, never on a form.
+     * @default true
+     */
     autoFocus?: boolean;
+    /** DOM id of the summary; its heading id is built from it. */
     id?: string;
+    /**
+     * Extra class on the summary element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -19,34 +19,50 @@ export type AttachmentFile = {
  * to something (a ticket, a message) where the file's name/size matters more than a big preview.
  *
  * @param {object} props
- * @param {string} [props.label="Attachment"]
- * @param {File|AttachmentFile|Array<File|AttachmentFile>|null} [props.value] A picked File, or an existing or uploading file: sizeBytes is its size in bytes, progress runs 0 to 100 while it uploads, error says why it failed.
- * @param {string} [props.name] Form field name, so an uncontrolled form can post the file.
+ * @param {string} [props.label]
+ * @param {File|AttachmentFile|Array<File|AttachmentFile>|null} [props.value]
+ * @param {string} [props.name]
  * @param {(file: File|null) => void | (files: File[]) => void} props.onChange single-mode → File|null; multiple → File[]
- * @param {boolean} [props.multiple=false]
- * @param {string} [props.accept] Defaults to images; pass e.g. "image/*,application/pdf" for mixed.
- *   An empty string accepts any file type, and the hint then names no types.
- * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB. 0 means no size
- *   limit: nothing is rejected for its size, and the hint names no size.
- * @param {boolean} [props.optional=false]
- * @param {boolean} [props.validate=true] Check each pick against `accept` and `maxSizeMb` and show
- *   the field's own message for a rejected file. Set false when the caller validates the files
- *   itself and shows its own message through `error`: every pick then reaches `onChange`, so the
- *   person never sees two messages in two voices for one problem. `accept` and `maxSizeMb` still
- *   set the picker filter and the hint text.
+ * @param {boolean} [props.multiple]
+ * @param {string} [props.accept]
+ * @param {number} [props.maxSizeMb]
+ * @param {boolean} [props.optional]
+ * @param {boolean} [props.validate]
  * @param {string} [props.error]
  * @param {string} [props.id]
  */
 export default function AppFileAttachment(props: {
+    /**
+     * The label shown above the field.
+     * @default "Attachment"
+     */
     label?: string;
+    /** A picked File, or an existing or uploading file: sizeBytes is its size in bytes, progress runs 0 to 100 while it uploads, error says why it failed. With multiple, an array of these. */
     value?: File | AttachmentFile | Array<File | AttachmentFile> | null;
+    /** Form field name, so an uncontrolled form can post the file. */
     name?: string;
     onChange: (file: File | null) => void | ((files: File[]) => void);
+    /**
+     * Lets the person attach several files. They stack in a list and each one removes on its own.
+     * @default false
+     */
     multiple?: boolean;
+    /** The file types the field takes, as an accept list. Defaults to images; pass for example image/*,application/pdf for mixed. An empty string accepts any file type, and the hint then names no types. */
     accept?: string;
+    /** The size limit in megabytes. Defaults to the shared limit. 0 means no size limit: nothing is rejected for its size, and the hint names no size. */
     maxSizeMb?: number;
+    /**
+     * Adds (optional) after the label.
+     * @default false
+     */
     optional?: boolean;
+    /**
+     * Checks each pick against accept and maxSizeMb and shows the field's own message for a rejected file. Set false when the page validates the files itself and shows its own message through error, so every pick reaches onChange and the person never sees two messages in two voices for one problem. accept and maxSizeMb still set the picker filter and the hint text.
+     * @default true
+     */
     validate?: boolean;
+    /** A message from the page, shown below the field beside the field's own validation messages. */
     error?: string;
+    /** DOM id of the file input; the label and the drop row point at it. Pass one when rows share a name. */
     id?: string;
 }): import("react").JSX.Element;