@webority/ui-react 0.88.1 → 0.89.0

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

@@ -12,26 +12,25 @@
  * @param {object} props
  * @param {string} [props.label]
  * @param {File|{ url: string, name?: string }|Array<File|{ url: string, name?: string }>|null} [props.value]
- * @param {string} [props.name] Form field name.
- * @param {string} [props.id] DOM id for the file input and its labels' `for` target.
+ * @param {string} [props.name]
+ * @param {string} [props.id]
  * @param {(file: File|null) => void | (files: File[]) => void} props.onPick single → File|null; multiple → File[]
- * @param {boolean} [props.multiple=false]
- * @param {number} [props.maxFiles] Cap on total files in multiple mode.
- * @param {string} [props.accept=".jpg,.jpeg,.png"] Accepted file types (the `accept` attribute).
- * @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.multiple]
+ * @param {number} [props.maxFiles]
+ * @param {string} [props.accept]
+ * @param {number} [props.maxSizeMb]
  * @param {boolean} [props.required]
  * @param {string} [props.error]
- * @param {string} [props.hint] Helper text below the control; an error (the caller's or a rejected
- *   pick's) replaces it while it shows.
- * @param {boolean} [props.loading=false] Spinner over the control and picking blocked, e.g. while
- *   the chosen file uploads.
- * @param {string} [props.className] Class to apply to the control element — the preview or dropzone shell.
- * @param {string} [props.fieldClassName] Class to apply to the wrapper field div — e.g. a `file-w-*` width preset.
+ * @param {string} [props.hint]
+ * @param {boolean} [props.loading]
+ * @param {string} [props.className]
+ * @param {string} [props.fieldClassName]
  * @param {object} [props.style] Inline style; lands on the control with `className`.
  */
 export default function AppFilePicker(props: {
+    /** The label shown above the field. */
     label?: string;
+    /** The chosen file or files: a File, an object with a url and an optional name, an array of those, or null. */
     value?: File | {
         url: string;
         name?: string;
@@ -39,18 +38,45 @@ export default function AppFilePicker(props: {
         url: string;
         name?: string;
     }> | null;
+    /** Form field name. */
     name?: string;
+    /** DOM id for the file input and its labels' for target. */
     id?: string;
     onPick: (file: File | null) => void | ((files: File[]) => void);
+    /**
+     * Lets the person pick several files. They stack in a list inside the dropzone.
+     * @default false
+     */
     multiple?: boolean;
+    /** Cap on total files in multiple mode. */
     maxFiles?: number;
+    /**
+     * Accepted file types (the accept attribute). Widen it, for example image/*,application/pdf, and non-image files show a file-type icon instead of a thumbnail.
+     * @default ".jpg,.jpeg,.png"
+     */
     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;
+    /** Marks the field as required in its label. */
     required?: boolean;
+    /** A message from the page, shown below the control. */
     error?: string;
+    /** Helper text below the control. An error (the page's or a rejected pick's) replaces it while it shows. */
     hint?: string;
+    /**
+     * Spinner over the control and picking blocked, for example while the chosen file uploads.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Class to apply to the control element: the preview or dropzone shell.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Class to apply to the wrapper field div, for example a file-w-* width preset.
+     * @default ""
+     */
     fieldClassName?: string;
     style?: object;
 }): import("react").JSX.Element;

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

@@ -1,16 +1,33 @@
 import "@webority/ui-elements/file-viewer";
 declare const AppFileViewer: import("react").ForwardRefExoticComponent<{
+    /** The file's URL. Changing it opens the new file. Without one the viewer draws its frame with a "No file to show." message. */
     src: string;
+    /** The name shown in the toolbar and used for printing and download. Defaults to the last part of src. */
     name?: string;
+    /** The file's MIME type. Defaults to a guess from the extension of name or src. */
     type?: string;
+    /** The view settings to start from, when your app stores them itself (for example against the signed-in person). Read when a file opens. With it, the browser stores nothing; save what onPrefsChange hands you and pass it back next time. */
     prefs?: object;
     onPrefsChange?: (prefs: object) => void;
+    /** Remembers the view settings (zoom, two-page view, thumbnails) in this browser under this key. Without it they last for the viewer's life. */
     viewKey?: string;
+    /**
+     * Shows a download button in the toolbar.
+     * @default false
+     */
     download?: boolean;
+    /**
+     * Shows the print button for a PDF or an image. Pass false to hide it.
+     * @default true
+     */
     print?: boolean;
+    /** URL of a hosted pdf.js worker, for a site whose content security policy refuses blob: workers. Defaults to the bundled copy. */
     workerSrc?: string;
+    /** A WebVTT captions file for a video; adds a captions button to the player. */
     captions?: string;
+    /** Folder holding pdf.js's cmaps/, standard_fonts/ and wasm/, which unusual PDFs need (Asian text, fonts a file does not embed, some scanned images). */
     assetBase?: string;
+    /** Your own controls, shown at the end of the toolbar. Hidden in full screen. */
     actions?: import('react').ReactNode;
     onLoad?: (detail: {
         kind: string;
@@ -19,6 +36,10 @@ declare const AppFileViewer: import("react").ForwardRefExoticComponent<{
     onError?: (detail: {
         message: string;
     }) => void;
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -22,19 +22,17 @@ import "@webority/ui-elements/elements/filter-popover";
  *
  * @param {object} props
  * @param {{ key: string, label: string, type: 'enum'|'multiEnum'|'dateRange'|'text',
- *   options?: { value: string, label: string }[], allLabel?: string, presets?: string[] }[]} props.facets `options` fills an `enum` or `multiEnum`;
- *   one with no options draws nothing. `label` names the control for assistive technology and is its placeholder.
- *   `allLabel` names an `enum` facet's clearing segment ("All payments"; default "All"); a facet shown as a select ignores it.
- *   `presets` gives a `dateRange` facet quick ranges (today, yesterday, last7Days, last30Days, thisMonth, lastMonth, thisFinancialYear).
- * @param {Record<string, string|string[]|{ from: string, to: string }>} props.value The current filters.
+ *   options?: { value: string, label: string }[], allLabel?: string, presets?: string[] }[]} props.facets
+ * @param {Record<string, string|string[]|{ from: string, to: string }>} props.value
  * @param {(key: string, value: string|string[]|{ from: string, to: string }) => void} props.onChange
  *   Called with the facet key and its new value. Clear all calls it once per active facet, with the empty value.
- * @param {number} [props.inline=3] How many facets stay in the row; the rest fold into the Filters button.
- * @param {boolean} [props.floating=false] A floating panel: hover, click or F opens the facets in a non-modal panel under the Filters button, with a chip summary in the row.
- * @param {boolean} [props.apply=false] Hold search and date range edits until Apply (or Enter in a search box), as the Razor app-filter-bar does; other choices still apply when they change. Apply shows only when a text or dateRange facet is present, and never with floating.
+ * @param {number} [props.inline]
+ * @param {boolean} [props.floating]
+ * @param {boolean} [props.apply]
  * @param {string} [props.className]
  */
 export default function AppFilterBar(props: {
+    /** The facets to draw, one filter control each. A facet with no options draws nothing. */
     facets: {
         key: string;
         label: string;
@@ -46,6 +44,7 @@ export default function AppFilterBar(props: {
         allLabel?: string;
         presets?: string[];
     }[];
+    /** The current filters, keyed by facet key: a string, a list of strings, or a { from, to } date range. */
     value: Record<string, string | string[] | {
         from: string;
         to: string;
@@ -54,8 +53,24 @@ export default function AppFilterBar(props: {
         from: string;
         to: string;
     }) => void;
+    /**
+     * How many facets stay in the row; the rest fold into the Filters button.
+     * @default 3
+     */
     inline?: number;
+    /**
+     * A floating panel: hover, click or F opens the facets in a non-modal panel under the Filters button, with a chip summary in the row.
+     * @default false
+     */
     floating?: boolean;
+    /**
+     * Hold search and date range edits until Apply (or Enter in a search box), as the Razor app-filter-bar does; other choices still apply when they change. Apply shows only when a text or dateRange facet is present, and never with floating.
+     * @default false
+     */
     apply?: boolean;
+    /**
+     * Extra classes on the filter bar.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -15,16 +15,16 @@ import "@webority/ui-elements/elements/dock";
  *
  * @param {object} props
  * @param {{ key?: string, title: string, icon: string|import('react').ReactNode,
- *   href?: string, to?: string, onClick?: () => void }[]} props.items The dock items,
- *   left to right. `title` is the accessible name and the hover tooltip.
+ *   href?: string, to?: string, onClick?: () => void }[]} props.items
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
- * @param {string} [props.ariaLabel='Quick navigation'] Accessible name for the dock landmark.
- * @param {boolean} [props.magnify=true] Set false to render a static dock (no hover effect).
- * @param {number} [props.maxScale] Item scale at cursor center (element default 1.6).
- * @param {number} [props.radius] Px falloff distance for the magnification (element default 100).
+ * @param {string} [props.ariaLabel]
+ * @param {boolean} [props.magnify]
+ * @param {number} [props.maxScale]
+ * @param {number} [props.radius]
  * @param {string} [props.className]
  */
 export default function AppFloatingDock(props: {
+    /** The dock items, left to right. title is the accessible name and the hover tooltip. */
     items: {
         key?: string;
         title: string;
@@ -34,9 +34,23 @@ export default function AppFloatingDock(props: {
         onClick?: () => void;
     }[];
     linkComponent?: import('react').ElementType;
+    /**
+     * Accessible name for the dock landmark.
+     * @default "Quick navigation"
+     */
     ariaLabel?: string;
+    /**
+     * Set false to render a static dock, with no hover effect.
+     * @default true
+     */
     magnify?: boolean;
+    /** Item scale at the cursor's center. The element default is 1.6. */
     maxScale?: number;
+    /** Falloff distance for the magnification, in pixels. The element default is 100. */
     radius?: number;
+    /**
+     * Extra classes on the dock.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -7,13 +7,22 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children The action buttons.
- * @param {boolean} [props.sticky=false] Stick to viewport bottom with border + background.
- * @param {"end"|"start"|"between"} [props.align="end"] Alignment of children.
+ * @param {boolean} [props.sticky]
+ * @param {"end"|"start"|"between"} [props.align]
  * @param {string} [props.className]
  */
 export default function AppFormActions(props: {
     children: import('react').ReactNode;
+    /**
+     * Sticks the actions to the bottom of the viewport with a border and background.
+     * @default false
+     */
     sticky?: boolean;
+    /**
+     * Alignment of the children: end, start or between.
+     * @default "end"
+     */
     align?: "end" | "start" | "between";
+    /** Extra class names added to the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -7,13 +7,22 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children Field components (AppInput, AppSelect, etc.).
- * @param {1|2|3|4|5|6|7|8|9|10|11|12} [props.columns=2] Number of columns, 1 to 12.
- * @param {boolean} [props.collapse=true] Stack to one column below the md breakpoint; false keeps the set columns at every width.
+ * @param {1|2|3|4|5|6|7|8|9|10|11|12} [props.columns]
+ * @param {boolean} [props.collapse]
  * @param {string} [props.className]
  */
 export default function AppFormRow(props: {
     children: import('react').ReactNode;
+    /**
+     * Number of columns, 1 to 12.
+     * @default 2
+     */
     columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /**
+     * Stack to one column below the md breakpoint; false keeps the set columns at every width.
+     * @default true
+     */
     collapse?: boolean;
+    /** Extra class names added to the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -8,24 +8,40 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children The form fields.
- * @param {import('react').ReactNode} [props.title] Section heading (h3).
- * @param {import('react').ReactNode} [props.description] Intro text below the title (optional).
- * @param {'stacked'|'side'} [props.layout='stacked'] `side` puts the title and description in a
- *   column beside the fields from lg up; below that it stacks.
- * @param {'top'|'start'} [props.labels='top'] `start` puts each field's label beside its control
- *   (one field per row) from md up; below that labels sit on top.
- * @param {'comfortable'|'compact'} [props.density='comfortable'] `compact` uses 32px controls and
- *   tighter gaps, for admin screens and dialogs.
- * @param {2|3|4} [props.headingLevel=3] Heading level of the section title, so it nests under the page or drawer heading.
+ * @param {import('react').ReactNode} [props.title]
+ * @param {import('react').ReactNode} [props.description]
+ * @param {'stacked'|'side'} [props.layout]
+ * @param {'top'|'start'} [props.labels]
+ * @param {'comfortable'|'compact'} [props.density]
+ * @param {2|3|4} [props.headingLevel]
  * @param {string} [props.className]
  */
 export default function AppFormSection(props: {
     children: import('react').ReactNode;
+    /** Section heading (h3). */
     title?: import('react').ReactNode;
+    /** Intro text below the title (optional). */
     description?: import('react').ReactNode;
+    /**
+     * side puts the title and description in a column beside the fields from lg up; below that it stacks.
+     * @default "stacked"
+     */
     layout?: 'stacked' | 'side';
+    /**
+     * start puts each field's label beside its control (one field per row) from md up; below that labels sit on top.
+     * @default "top"
+     */
     labels?: 'top' | 'start';
+    /**
+     * compact uses 32px controls and tighter gaps, for admin screens and dialogs.
+     * @default "comfortable"
+     */
     density?: 'comfortable' | 'compact';
+    /**
+     * Heading level of the section title, so it nests under the page or drawer heading.
+     * @default 3
+     */
     headingLevel?: 2 | 3 | 4;
+    /** Extra class names added to the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -9,27 +9,44 @@ import "@webority/ui-elements/elements/hover-card";
  * text, no interactive content). Wraps `<wui-hover-card>`, which Razor `<app-hover-card>` renders too.
  *
  * @param {object} props
- * @param {import('react').ReactNode} props.trigger The name or link the card belongs to. Make it a link
- *   or button so keyboard users can focus it.
+ * @param {import('react').ReactNode} props.trigger
  * @param {import('react').ReactNode} [props.children] The card's content. The card is phrasing content, so it can
  *   sit on a name inside a sentence; there, build the content from spans (a `<div>` cannot be inside a `<p>`).
- * @param {boolean} [props.loading=false] Shows a spinner and `loadingLabel` in place of the children while
- *   the preview is fetched; open the fetch from `onOpenChange`.
- * @param {string} [props.loadingLabel="Loading"] The text beside the spinner.
- * @param {string} [props.label] The card's accessible name ("Asha Verma, profile").
- * @param {number} [props.openDelay=300] Milliseconds of hover or focus before it opens.
- * @param {number} [props.closeDelay=150] Milliseconds after leaving before it closes.
+ * @param {boolean} [props.loading]
+ * @param {string} [props.loadingLabel]
+ * @param {string} [props.label]
+ * @param {number} [props.openDelay]
+ * @param {number} [props.closeDelay]
  * @param {(open: boolean) => void} [props.onOpenChange] Called when the card opens or closes.
  * @param {string} [props.className]
  */
 export default function AppHoverCard(props: {
+    /** The name or link the card belongs to. Make it a link or button so keyboard users can focus it. */
     trigger: import('react').ReactNode;
     children?: import('react').ReactNode;
+    /**
+     * Shows a spinner and the loading label in place of the children while the preview is fetched; start the fetch when the card opens.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * The text beside the spinner.
+     * @default "Loading"
+     */
     loadingLabel?: string;
+    /** The card's accessible name, for example Asha Verma, profile. */
     label?: string;
+    /**
+     * Milliseconds of hover or focus before it opens.
+     * @default 300
+     */
     openDelay?: number;
+    /**
+     * Milliseconds after leaving before it closes.
+     * @default 150
+     */
     closeDelay?: number;
     onOpenChange?: (open: boolean) => void;
+    /** Extra class names added to the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -25,25 +25,35 @@ export declare function registerIcons(map: Record<string, (props: {
 }) => import('react').ReactNode>): void;
 /**
  * @param {object} props
- * @param {string} props.name Icon name (kebab-case; curated or full-catalogue).
- * @param {number} [props.size=16]
+ * @param {string} props.name
+ * @param {number} [props.size]
  * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.variant]
- * @param {string} [props.tooltip] A collision-aware hover/focus tooltip (via `AppTooltip` / Popper)
- *   that flips to stay on-screen. The glyph is wrapped in a `role="img"` + `aria-label` span so the
- *   icon is also named for assistive tech.
- * @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]
- * @param {string} [props.color] The icon colour. Without it the icon takes --wui-icon-color when an ancestor sets that variable, else the inherited text colour.
+ * @param {string} [props.color]
  * @param {object} [props.style]
  */
 export default function AppIcon(props: {
+    /** Icon name (kebab-case; curated or full-catalogue). */
     name: string;
+    /**
+     * Icon size in pixels.
+     * @default 16
+     */
     size?: number;
+    /** Icon style: linear, outline, bold, bulk, broken or twotone. */
     variant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /** A hover and focus tooltip that flips to stay on screen. The glyph is wrapped in a span with role img and an aria-label, so the icon is also named for assistive tech. */
     tooltip?: string;
+    /**
+     * Preferred tooltip side; auto picks the side with the most room.
+     * @default "auto"
+     */
     tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
+    /** Extra class names added to the root element. */
     className?: string;
+    /** The icon colour. Without it the icon takes --wui-icon-color when an ancestor sets that variable, else the inherited text colour. */
     color?: string;
     style?: object;
 }): any;

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

@@ -13,6 +13,7 @@
  * @param {string} [props.className]
  */
 export default function AppInfoList(props: {
+    /** The rows, in order. Each row has an icon, a label and a value. */
     items: {
         key?: string;
         icon: string | import('react').ReactNode;
@@ -20,5 +21,6 @@ export default function AppInfoList(props: {
         value: import('react').ReactNode;
         href?: string;
     }[];
+    /** Extra classes on the list. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -6,16 +6,29 @@
  * Implemented as a thin wrapper over AppPopover with hover and focus triggers.
  *
  * @param {object} props
- * @param {string} [props.label] The popover title, and the trigger's accessible name. Unset, the trigger is named "More information".
+ * @param {string} [props.label]
  * @param {import('react').ReactNode} [props.children] The popover body. Supply a label, a body, or both: a body-less tip is a heading, a title-less tip is just the body. With neither, the tip renders nothing.
- * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.placement="auto"] Where the popover opens; `auto` flips it to stay in view.
- * @param {"sm"|"md"|"lg"|"xl"} [props.width="md"] The widest the card grows before its text wraps: 220, 276, 360 or 480px. It is a maximum, so a short tip stays as narrow as its text.
- * @param {string} [props.className=""] Extra classes on the wrapper.
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.placement]
+ * @param {"sm"|"md"|"lg"|"xl"} [props.width]
+ * @param {string} [props.className]
  */
 export default function AppInfoTip(props: {
+    /** The popover title and the trigger’s accessible name. Unset, the trigger is named “More information”. */
     label?: string;
     children?: import('react').ReactNode;
+    /**
+     * Where the popover opens. Auto flips it to stay in view.
+     * @default "auto"
+     */
     placement?: "auto" | "top" | "bottom" | "start" | "end";
+    /**
+     * The widest the card grows before its text wraps, at 220, 276, 360 or 480px. It is a maximum, so a short tip stays as narrow as its text.
+     * @default "md"
+     */
     width?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Extra classes on the wrapper.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -19,39 +19,50 @@ import "@webority/ui-elements/elements/select";
  * the Razor `<app-inline-edit>` renders the same markup.
  *
  * @param {object} props
- * @param {string | number | null} [props.value] The saved value. A date is `yyyy-MM-dd`; a select
- *   value is one of the `options` values.
+ * @param {string | number | null} [props.value]
  * @param {(next: string | number | null) => void | Promise<unknown>} [props.onSave] Persist the new
  *   value. A number field passes a number (null when cleared); the others pass a string. Reject to
  *   refuse it: the rejection's message is shown.
- * @param {'text'|'number'|'select'|'date'|'textarea'} [props.type='text'] The control it turns into.
- * @param {{ value: string | number, label: string }[]} [props.options] The choices of a select.
- * @param {string} props.label What the value is ("Owner"): the accessible name of the value and
- *   the control, and the subject of what screen readers hear ("Owner saved.").
- * @param {string} [props.placeholder] Shown, muted, when there is no value, and in the empty
- *   control. Without it an empty value shows a hyphen.
+ * @param {'text'|'number'|'select'|'date'|'textarea'} [props.type]
+ * @param {{ value: string | number, label: string }[]} [props.options]
+ * @param {string} props.label
+ * @param {string} [props.placeholder]
  * @param {(next: string | number | null) => string | null | undefined} [props.validate] Checked
  *   before saving: return a message to keep the control open with that message, or nothing to save.
  * @param {(value: string | number | null) => import('react').ReactNode} [props.renderValue] How a
  *   saved, non-empty value reads (a formatted amount, a status badge). Text and markup only: the
  *   value is a button, so it must not hold its own controls or links.
- * @param {boolean} [props.disabled=false] Show the value without the edit affordance.
- * @param {string} [props.className] Extra classes on the root element.
- * @param {string} [props.id] The root's id; the control and error ids derive from it. Generated when omitted.
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.className]
+ * @param {string} [props.id]
  */
 export default function AppInlineEdit(props: {
+    /** The saved value. A date is yyyy-MM-dd; a select value is one of the options' values. */
     value?: string | number | null;
     onSave?: (next: string | number | null) => void | Promise<unknown>;
+    /**
+     * The control the value turns into.
+     * @default "text"
+     */
     type?: 'text' | 'number' | 'select' | 'date' | 'textarea';
+    /** The choices of a select. */
     options?: {
         value: string | number;
         label: string;
     }[];
+    /** What the value is, such as Owner: its accessible name and what screen readers announce, as in Owner saved. */
     label: string;
+    /** Shown, muted, when there is no value, and in the empty control. Without it an empty value shows a hyphen. */
     placeholder?: string;
     validate?: (next: string | number | null) => string | null | undefined;
     renderValue?: (value: string | number | null) => import('react').ReactNode;
+    /**
+     * Shows the value without the edit affordance.
+     * @default false
+     */
     disabled?: boolean;
+    /** Extra classes on the root element. */
     className?: string;
+    /** The root's id; the control and error ids derive from it. Generated when omitted. */
     id?: string;
 }): import("react").JSX.Element;