@webority/ui-react 0.88.1 → 0.90.0

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

@@ -1,36 +1,115 @@
 declare const AppInput: import("react").ForwardRefExoticComponent<{
+    /** The field label, shown above the control. */
     label?: import('react').ReactNode;
+    /**
+     * Marks the field as required, with a visible mark and the native required attribute.
+     * @default false
+     */
     required?: boolean;
+    /** A validation message under the field. It marks the control invalid for assistive technology. */
     error?: string;
+    /** Help text under the field. An error replaces it while both are set. */
     hint?: string;
+    /** Text shown in an empty field. */
     placeholder?: string;
+    /** The content of the info-tip beside the label, opened by a button. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of the info-tip button.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /**
+     * The native input type, such as email, tel, number or password.
+     * @default "text"
+     */
     type?: string;
+    /**
+     * The control size. Sm and lg opt out of the shared height. Xl is the tallest, with its floating label inside the box.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg" | "xl";
+    /** A leading icon, given as a semantic icon name. */
     leftIcon?: string;
+    /** A trailing icon button, given as a semantic icon name. It calls onRightIconClick when pressed. */
     rightIcon?: string;
     onRightIconClick?: () => void;
+    /** The accessible name of the right-icon button. It falls back to the icon name. */
     rightIconLabel?: string;
+    /** A unit shown after the value, such as kg. */
     unit?: string;
+    /** The id of the control. The label points at it. */
     id?: string;
+    /** The form field name. */
     name?: string;
+    /** The controlled value. Pair it with onChange. */
     value?: string | number;
+    /** The starting value of an uncontrolled field. */
     defaultValue?: string | number;
+    /** Extra classes on the control. */
     className?: string;
+    /** Extra classes on the field wrapper. */
     fieldClassName?: string;
+    /**
+     * Disables the field.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Shows a clear button while the field has a value.
+     * @default false
+     */
     clearable?: boolean;
+    /**
+     * Shows a live character count under the field.
+     * @default false
+     */
     showCount?: boolean;
+    /** The character cap. The count turns red as the cap is approached. */
     maxLength?: number;
+    /** A bordered box before the input, such as a currency sign or a scheme. */
     prefix?: import('react').ReactNode;
+    /** A bordered box after the input, such as a decimal part or a domain. */
     suffix?: import('react').ReactNode;
+    /** A control rendered beside the field, outside its border, such as a verify button. */
     action?: import('react').ReactNode;
-    floatingLabel?: boolean | "above";
+    /**
+     * Where the label rests. Off keeps it above the field. Border sits it inside as a placeholder, then slides it onto the top border once the field is focused or filled. Above rests it above the box, clear of the border.
+     * @default "off"
+     */
+    floatingLabel?: "off" | "border" | "above";
+    /** A borderless look with no border or background, for inline editing. */
     variant?: "bare";
-    passwordRequirements?: boolean | object;
+    /**
+     * On a password field, shows a live checklist of the password rules as the user types. It uses the default policy unless passwordPolicy is set.
+     * @default "off"
+     */
+    passwordRequirements?: "off" | "shown";
+    /** A custom password policy that replaces the default rules. It is used only while passwordRequirements is shown. */
+    passwordPolicy?: {
+        minLength?: number;
+        uppercase?: boolean;
+        lowercase?: boolean;
+        digit?: boolean;
+        special?: boolean;
+        uniqueChars?: number;
+        customRules?: Array<{
+            label: string;
+            pattern: string;
+        }>;
+        title?: string;
+    };
+    /**
+     * The side the requirements popover opens on. Auto flips to stay in view. Inline puts the checklist under the field, in place of the hint.
+     * @default "auto"
+     */
     requirementsPlacement?: "auto" | "top" | "bottom" | "start" | "end" | "inline";
+    /** A named mask such as pan, phone-in, gstin, aadhaar, ifsc, pin-code, date or amount, or a pattern where 9 is a digit and A a letter. The value is formatted as it is typed. */
     mask?: string;
+    /**
+     * With a mask, a native form submit posts the formatted value instead of the raw characters.
+     * @default false
+     */
     postFormatted?: boolean;
     onMaskChange?: (raw: string, formatted: string) => void;
     onChange?: (e: import('react').ChangeEvent<HTMLInputElement>) => void;

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

@@ -9,21 +9,34 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children The field.
- * @param {import('react').ReactNode} [props.leading] Before the field: text, or a node such as an `AppButton`.
- * @param {import('react').ReactNode} [props.trailing] After the field.
- * @param {string} [props.label] The group's label, above it.
- * @param {string} [props.htmlFor] The `id` of the field the label names.
- * @param {boolean} [props.required=false] Marks the label required.
- * @param {'sm'|'md'|'lg'} [props.size='md'] Height of text add-ons; set the same size on the field and on button add-ons.
+ * @param {import('react').ReactNode} [props.leading]
+ * @param {import('react').ReactNode} [props.trailing]
+ * @param {string} [props.label]
+ * @param {string} [props.htmlFor]
+ * @param {boolean} [props.required]
+ * @param {'sm'|'md'|'lg'} [props.size]
  * @param {string} [props.className]
  */
 export default function AppInputGroup(props: {
     children: import('react').ReactNode;
+    /** Before the field: text, or a node such as an AppButton. */
     leading?: import('react').ReactNode;
+    /** After the field. */
     trailing?: import('react').ReactNode;
+    /** The group's label, above it. */
     label?: string;
+    /** The id of the field the label names. */
     htmlFor?: string;
+    /**
+     * Marks the label required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * Height of text add-ons; set the same size on the field and on button add-ons.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /** Extra class on the root. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -21,11 +21,7 @@
  *   href?: string, summary?: import('react').ReactNode | ((cards: object[]) => import('react').ReactNode),
  *   acceptFrom?: string[], collapsible?: boolean, collapsed?: boolean, emptyText?: string,
  *   visibleLimit?: number }[]} props.columns
- *   The columns, left to right. `acceptFrom` lists the only columns this one takes cards from;
- *   `collapsible` columns fold to a strip, remembered per `boardId`; `collapsed` is the first state.
- *   `visibleLimit` shows the first N cards the filter lets through, with "Show N more" for the
- *   rest; the count still covers every card, and a card dropped there always shows.
- * @param {object[]} props.cards Every card on the board.
+ * @param {object[]} props.cards
  * @param {(card: object) => import('react').ReactNode} props.renderCard The card's content.
  * @param {(column: object, cards: object[]) => import('react').ReactNode} [props.renderColumnActions]
  *   Controls at the right of a column's head (a "+" that adds a card, say), given the column and
@@ -44,27 +40,23 @@
  * @param {(card: object, from: string, to: string) => boolean | string} [props.accept] Refuse a move:
  *   false, or a string saying why (shown in the column while the card is carried).
  * @param {(card: object) => boolean} [props.filter] Show only the cards it returns true for; counts follow.
- * @param {string} [props.boardId] Remembers collapsed columns per browser under this id.
- * @param {string} [props.ariaLabel='Board'] Accessible name of the board region.
- * @param {string} [props.emptyText='Nothing here'] Text of an empty column.
- * @param {boolean} [props.readOnly=false] No card can move.
- * @param {boolean} [props.swipeHint=false] On phones, a "Swipe sideways or tap a column" line under the switcher.
- * @param {number} [props.columnWidth] Width of each column in px.
- * @param {number} [props.fillOffset] Px taken off the viewport height when the board fills the screen, in place of the 240px default.
- * @param {string} [props.activeCardKey] The key of the card just added, highlighted until the next render.
- * @param {'inline'|'stacked'} [props.headLayout='inline'] Stacked puts each stage name on its own line, with no tone dot.
- * @param {boolean} [props.fill=false] From md up, the board fits the screen: it is the viewport's height
- *   less `--wui-kanban-fill-offset` (240px by default; set it on the board for the page around it), and
- *   each column's cards scroll inside the column under its fixed head, so a long column never scrolls
- *   the page. While a card is carried, a column's list scrolls when the pointer nears its top or
- *   bottom. Phones keep the one-column layout, scrolling the page.
- * @param {'number'|'currency'|'compact'} [props.summaryFormat] Each column's summary becomes the sum
- *   of its visible cards' `getCardValue`, in this format.
- * @param {'rupees'|'paise'} [props.summaryUnit='rupees'] The unit of the card values.
+ * @param {string} [props.boardId]
+ * @param {string} [props.ariaLabel]
+ * @param {string} [props.emptyText]
+ * @param {boolean} [props.readOnly]
+ * @param {boolean} [props.swipeHint]
+ * @param {number} [props.columnWidth]
+ * @param {number} [props.fillOffset]
+ * @param {string} [props.activeCardKey]
+ * @param {'inline'|'stacked'} [props.headLayout]
+ * @param {boolean} [props.fill]
+ * @param {'number'|'currency'|'compact'} [props.summaryFormat]
+ * @param {'rupees'|'paise'} [props.summaryUnit]
  * @param {string} [props.className]
- * @param {string} [props.id] The board's id; the column, body and help ids derive from it. Generated when omitted.
+ * @param {string} [props.id]
  */
 export default function AppKanban(props: {
+    /** The columns, left to right. A column takes cards only from the columns in its `acceptFrom`; a `collapsible` column folds to a strip that is remembered per `boardId`. Each column also needs a unique `key`. */
     columns: {
         key: string;
         title: string;
@@ -77,6 +69,7 @@ export default function AppKanban(props: {
         emptyText?: string;
         visibleLimit?: number;
     }[];
+    /** Every card on the board. A card is a plain object; it sits in the column named by its `column` and is identified by its `key` or `id`. */
     cards: object[];
     renderCard: (card: object) => import('react').ReactNode;
     renderColumnActions?: (column: object, cards: object[]) => import('react').ReactNode;
@@ -99,18 +92,53 @@ export default function AppKanban(props: {
     }) => void | Promise<unknown>;
     accept?: (card: object, from: string, to: string) => boolean | string;
     filter?: (card: object) => boolean;
+    /** Remembers which columns are folded per browser, under this id. */
     boardId?: string;
+    /**
+     * The accessible name of the board region.
+     * @default "Board"
+     */
     ariaLabel?: string;
+    /**
+     * Text of an empty column.
+     * @default "Nothing here"
+     */
     emptyText?: string;
+    /**
+     * No card can be moved.
+     * @default false
+     */
     readOnly?: boolean;
+    /**
+     * On phones, a Swipe sideways or tap a column line under the column switcher.
+     * @default false
+     */
     swipeHint?: boolean;
+    /** The width of each column in px. */
     columnWidth?: number;
+    /** The px taken off the viewport height when the board fills the screen, in place of the 240px default. */
     fillOffset?: number;
+    /** The key of the card just added; it is highlighted until the next render. */
     activeCardKey?: string;
+    /**
+     * Stacked puts each stage name on its own line, with no tone dot.
+     * @default "inline"
+     */
     headLayout?: 'inline' | 'stacked';
+    /**
+     * From md up the board fits the screen and each column's cards scroll inside the column under its fixed head. Phones keep the one-column layout.
+     * @default false
+     */
     fill?: boolean;
+    /** Makes each column's summary the sum of its visible cards' values, in this format. The values come from a function in code. */
     summaryFormat?: 'number' | 'currency' | 'compact';
+    /**
+     * The unit of the card values that summaryFormat adds up.
+     * @default "rupees"
+     */
     summaryUnit?: 'rupees' | 'paise';
+    /** Extra classes on the board. */
     className?: string;
+    /** The board's id; the column, body and help ids derive from it. Generated when omitted. */
     id?: string;
 }): import("react").JSX.Element;

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

@@ -11,5 +11,6 @@
  */
 export default function AppKbd(props: {
     children: string | number;
+    /** Extra classes on the key chip. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -3,65 +3,95 @@
  * Label, value, and an optional period-over-period delta.
  *
  * @param {object} props
- * @param {string} props.label What the number measures.
- * @param {import('react').ReactNode} props.value The number itself, already formatted.
- * @param {import('react').ReactNode} [props.caption] A sub-line under the value (e.g. "Total sent").
- * @param {string|import('react').ReactNode} [props.icon] Icon name for the leading tile, or a custom node.
- * @param {'primary'|'success'|'warning'|'danger'|'info'|'neutral'} [props.iconTone] Tints the icon chip.
- * @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.delta] Change text, e.g. "12% vs last month".
- * @param {'up'|'down'|'flat'} [props.deltaDirection] Colours the delta and picks its arrow. Omitted →
- *   inferred from a leading "+"/"-" on `delta` (falls back to 'flat').
- * @param {'success'|'danger'|'neutral'} [props.deltaTone] The delta's colour, overriding the one its
- *   direction implies, for a figure where a rise is bad news (refunds, bounce rate, cost). The arrow
- *   still follows the direction. Omitted: up is success, down is danger, flat is muted.
- * @param {number[]} [props.sparkline] A trend series rendered as a small inline chart.
- * @param {'plain'|'filled'|'accent'|'spotlight'} [props.variant='plain'] The tile surface/layout:
- *   plain (a borderless tile on the surface fill), filled (a subtle surface fill), accent (a brand-tinted fill),
- *   spotlight (editorial feature tile — icon pinned top-right, large value, caption below).
- * @param {'sm'|'md'|'lg'} [props.size='md'] Tile scale: sm (compact), md (default), lg (a hero
- *   tile with an enlarged value — for the single headline stat above a dashboard).
- * @param {number} [props.valueSize] Custom value ("main heading") font-size in px. Overrides the
- *   size/variant default — use it to tame a too-large headline (e.g. the spotlight value).
- * @param {boolean} [props.inline=false] Put the icon beside the text instead of above it.
- * @param {boolean} [props.attention=false] Marks the tile as needing action (warning-tinted).
- * @param {string} [props.href] Renders the whole tile as a link to this URL.
+ * @param {string} props.label
+ * @param {import('react').ReactNode} props.value
+ * @param {import('react').ReactNode} [props.caption]
+ * @param {string|import('react').ReactNode} [props.icon]
+ * @param {'primary'|'success'|'warning'|'danger'|'info'|'neutral'} [props.iconTone]
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant]
+ * @param {import('react').ReactNode} [props.delta]
+ * @param {'up'|'down'|'flat'} [props.deltaDirection]
+ * @param {'success'|'danger'|'neutral'} [props.deltaTone]
+ * @param {number[]} [props.sparkline]
+ * @param {'plain'|'filled'|'accent'|'spotlight'} [props.variant]
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {number} [props.valueSize]
+ * @param {boolean} [props.inline]
+ * @param {boolean} [props.attention]
+ * @param {string} [props.href]
  * @param {import('react').ElementType} [props.linkComponent] Router link; receives `to` instead of `href`.
- * @param {string} [props.className] Extra class(es) on the tile root.
+ * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style] Inline style on the tile root; the
  *   `valueSize` var is merged into it.
- * @param {string} [props.iconClassName] Extra class(es) on the icon chip.
- * @param {string} [props.labelClassName] Extra class(es) on the label.
- * @param {string} [props.valueClassName] Extra class(es) on the value.
- * @param {string} [props.captionClassName] Extra class(es) on the caption.
- * @param {string} [props.deltaClassName] Extra class(es) on the delta.
- * @param {string} [props.sparklineClassName] Extra class(es) on the sparkline.
+ * @param {string} [props.iconClassName]
+ * @param {string} [props.labelClassName]
+ * @param {string} [props.valueClassName]
+ * @param {string} [props.captionClassName]
+ * @param {string} [props.deltaClassName]
+ * @param {string} [props.sparklineClassName]
  */
 export default function AppKpiTile(props: {
+    /** What the number measures. */
     label: string;
+    /** The number itself, already formatted. */
     value: import('react').ReactNode;
+    /** A sub-line under the value, such as Total sent. */
     caption?: import('react').ReactNode;
+    /** An icon name for the leading tile, or a custom node. */
     icon?: string | import('react').ReactNode;
+    /** Tints the icon chip. */
     iconTone?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * The icon style of a named icon; a node icon is drawn as given.
+     * @default "linear"
+     */
     iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /** The change text, such as 12% vs last month. */
     delta?: import('react').ReactNode;
+    /** Colours the delta and picks its arrow. Left out, it is read from a leading plus or minus sign on the delta and falls back to flat. */
     deltaDirection?: 'up' | 'down' | 'flat';
+    /** The delta's colour, overriding the one its direction implies, for a figure where a rise is bad news such as refunds or cost. The arrow still follows the direction. */
     deltaTone?: 'success' | 'danger' | 'neutral';
+    /** A trend series drawn as a small inline chart. */
     sparkline?: number[];
+    /**
+     * The tile surface and layout: plain is a borderless tile, filled a subtle fill, accent a brand-tinted fill, spotlight a feature tile with the icon top right, a large value and the caption below.
+     * @default "plain"
+     */
     variant?: 'plain' | 'filled' | 'accent' | 'spotlight';
+    /**
+     * The tile scale: sm is compact, md the default, lg a hero tile with an enlarged value.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /** A custom value font size in px. It overrides the size and variant default, to tame a too-large headline. */
     valueSize?: number;
+    /**
+     * Puts the icon beside the text instead of above it.
+     * @default false
+     */
     inline?: boolean;
+    /**
+     * Marks the tile as needing action, with a warning tint.
+     * @default false
+     */
     attention?: boolean;
+    /** Renders the whole tile as a link to this address. */
     href?: string;
     linkComponent?: import('react').ElementType;
+    /** Extra classes on the tile root. */
     className?: string;
     style?: import('react').CSSProperties;
+    /** Extra classes on the icon chip. */
     iconClassName?: string;
+    /** Extra classes on the label. */
     labelClassName?: string;
+    /** Extra classes on the value. */
     valueClassName?: string;
+    /** Extra classes on the caption. */
     captionClassName?: string;
+    /** Extra classes on the delta. */
     deltaClassName?: string;
+    /** Extra classes on the sparkline. */
     sparklineClassName?: string;
 }): import("react").JSX.Element;

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

@@ -12,18 +12,15 @@ import "@webority/ui-elements/elements/lightbox";
  *
  * @param {object} props
  * @param {{ src: string, thumb?: string, alt?: string, caption?: string, name?: string, key?: string }[]} props.items
- *   The images. `src` is the full image, `thumb` the thumbnail (default: `src`), `alt` its text
- *   alternative (default: the caption), `caption` the line under it in the full-screen view and
- *   `name` the file name a download saves under (default: the last part of `src`).
- * @param {boolean} [props.download=false] Shows a download action. A browser ignores `name` for an
- *   image on another origin.
- * @param {string} [props.label="Image viewer"] The full-screen dialog's name for screen readers.
+ * @param {boolean} [props.download]
+ * @param {string} [props.label]
  * @param {(index: number) => void} [props.onChange] Called with the position (from 0) of the
  *   image shown, when the view opens and each time it changes.
  * @param {() => void} [props.onClose] Called when the full-screen view closes.
  * @param {string} [props.className]
  */
 export default function AppLightbox(props: {
+    /** The images, each opening full screen from its thumbnail. */
     items: {
         src: string;
         thumb?: string;
@@ -32,9 +29,18 @@ export default function AppLightbox(props: {
         name?: string;
         key?: string;
     }[];
+    /**
+     * Shows a download action. A browser ignores `name` for an image on another origin.
+     * @default false
+     */
     download?: boolean;
+    /**
+     * The full-screen dialog's name for screen readers.
+     * @default "Image viewer"
+     */
     label?: string;
     onChange?: (index: number) => void;
     onClose?: () => void;
+    /** Extra classes on the gallery. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -12,36 +12,57 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} [props.children] Link text. Wins over `label` when both are given.
- * @param {import('react').ReactNode} [props.label] Link text as a prop, an alternative to `children` (mirrors the Razor `label` attribute).
- * @param {string} [props.href] Destination, or `to` through `linkComponent`. Unset, the anchor has no href.
- * @param {"underline"|"underline-center"|"static"|"slide"|"icon"|"highlight"|"bracket"|"fade"|"grow"|"glow"|"shine"|"none"} [props.animation="underline"]
- *   Hover treatment: `underline` (line slides in left to right), `underline-center` (line grows
- *   from the middle out), `static` (an always-visible single underline, no motion, the classic
- *   link look), `slide` (label and icons nudge right), `icon` (a trailing icon slides and fades in,
- *   defaulting to an arrow when no icon is given), `highlight` (a tinted background wipes across),
- *   `bracket` (`[ ]` brackets slide in around the label), `fade` (colour or opacity shift only),
- *   `grow` (letter-spacing opens up), `glow` (a soft accent glow), `shine` (a light shimmer
- *   sweeps across the label), `none` (a plain coloured link, no underline, no motion).
- * @param {string|import('react').ReactNode} [props.leftIcon=null] Leading glyph: a semantic icon name or a node.
- * @param {string|import('react').ReactNode} [props.rightIcon=null] Trailing glyph: a semantic icon name or a node.
- * @param {"sm"|"md"|"lg"} [props.size="md"] Text and icon size.
- * @param {"default"|"dark"} [props.surface="default"] Set "dark" when the link sits on a dark panel, such as a dark hero or footer; the text turns light.
- * @param {boolean} [props.external=false] Open in a new tab (adds `target` and `rel`).
- * @param {boolean} [props.disabled=false] Render as unavailable (no navigation, `aria-disabled`).
+ * @param {import('react').ReactNode} [props.label]
+ * @param {string} [props.href]
+ * @param {"underline"|"underline-center"|"static"|"slide"|"icon"|"highlight"|"bracket"|"fade"|"grow"|"glow"|"shine"|"none"} [props.animation]
+ * @param {string|import('react').ReactNode} [props.leftIcon]
+ * @param {string|import('react').ReactNode} [props.rightIcon]
+ * @param {"sm"|"md"|"lg"} [props.size]
+ * @param {"default"|"dark"} [props.surface]
+ * @param {boolean} [props.external]
+ * @param {boolean} [props.disabled]
  * @param {import('react').ElementType} [props.linkComponent] Router link component; it receives `to` instead of `href`. Keeps the library router-agnostic.
- * @param {string} [props.className=""] Extra classes on the anchor.
+ * @param {string} [props.className]
  */
 export default function AppLink(props: {
     children?: import('react').ReactNode;
+    /** The link text as a prop, an alternative to children. When both are given, children wins. */
     label?: import('react').ReactNode;
+    /** The destination, or the `to` path when a link component is given. Left out, the anchor has no href. */
     href?: string;
+    /**
+     * The hover treatment: underline slides a line in from the left, underline-center grows it from the middle, static is an always-visible underline with no motion, slide nudges the label and icons right, icon slides a trailing icon in (an arrow when none is given), highlight wipes a tinted background across, bracket slides brackets in around the label, fade shifts colour only, grow opens up the letter spacing, glow adds a soft glow, shine sweeps a light shimmer across the label, and none is a plain coloured link.
+     * @default "underline"
+     */
     animation?: "underline" | "underline-center" | "static" | "slide" | "icon" | "highlight" | "bracket" | "fade" | "grow" | "glow" | "shine" | "none";
+    /** The leading glyph: an icon name or a node. */
     leftIcon?: string | import('react').ReactNode;
+    /** The trailing glyph: an icon name or a node. */
     rightIcon?: string | import('react').ReactNode;
+    /**
+     * The text and icon size.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg";
+    /**
+     * Set dark when the link sits on a dark panel such as a dark hero or footer; the text turns light.
+     * @default "default"
+     */
     surface?: "default" | "dark";
+    /**
+     * Opens the link in a new tab, with the matching target and rel.
+     * @default false
+     */
     external?: boolean;
+    /**
+     * Renders the link as unavailable: no navigation, and aria-disabled is set.
+     * @default false
+     */
     disabled?: boolean;
     linkComponent?: import('react').ElementType;
+    /**
+     * Extra classes on the anchor.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;