@cmgfi/clear-ds 1.2.1 → 1.2.3

package/dist/index.d.ts

@@ -13,6 +13,8 @@ import { RefAttributes } from 'react';
  * (all three use a light gray header).
  *
  * @example
+ *
+ * ```tsx
  * const [open, setOpen] = useState(['item1']);
  * <Accordion
  *   variant="page"
@@ -23,6 +25,7 @@ import { RefAttributes } from 'react';
  *   openIds={open}
  *   onChange={setOpen}
  * />
+ * ```
  */
 export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
 
@@ -179,8 +182,11 @@ export declare interface BannerTabItem {
  * Fully controlled — the parent owns which tab is active.
  *
  * @example
+ *
+ * ```tsx
  * const [active, setActive] = useState('loan-summary');
  * <BannerTabs items={loanStages} activeId={active} onChange={setActive} />
+ * ```
  */
 export declare const BannerTabs: ForwardRefExoticComponent<BannerTabsProps & RefAttributes<HTMLDivElement>>;
 
@@ -207,16 +213,25 @@ export declare interface BannerTabStatus {
  * leading/trailing icons, and an optional notification badge.
  *
  * @example
- * <Button>Submit</Button>
  *
+ * ```tsx
+ * <Button>Submit</Button>
+ * ```
  * @example
- * <Button variant="secondary" size="sm">Cancel</Button>
  *
+ * ```tsx
+ * <Button variant="secondary" size="sm">Cancel</Button>
+ * ```
  * @example
- * <Button variant="danger" leadingIcon={<i className="pi pi-trash" />}>Delete</Button>
  *
+ * ```tsx
+ * <Button variant="danger" leadingIcon={<i className="pi pi-trash" />}>Delete</Button>
+ * ```
  * @example
+ *
+ * ```tsx
  * <Button badge={3} trailingIcon={<i className="pi pi-chevron-down" />}>Actions</Button>
+ * ```
  */
 export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
 
@@ -254,10 +269,15 @@ export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
  * inside DatePicker, extracted for use on its own.
  *
  * @example
- * <Calendar value={date} onChange={setDate} />
  *
+ * ```tsx
+ * <Calendar value={date} onChange={setDate} />
+ * ```
  * @example
+ *
+ * ```tsx
  * <Calendar value={date} onChange={setDate} minDate={new Date()} showFooter />
+ * ```
  */
 export declare const Calendar: ForwardRefExoticComponent<CalendarProps & RefAttributes<HTMLDivElement>>;
 
@@ -292,20 +312,27 @@ export declare interface CalendarProps {
  * All sections are optional — use what you need.
  *
  * @example
+ *
+ * ```tsx
  * // Standard card
  * <Card title="Loan Summary" subTitle="Application #12345" footer={<Button>View</Button>}>
  *   <p>Body content goes here.</p>
  * </Card>
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Content-only container (no header or footer)
  * <Card><DataTable ... /></Card>
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Interactive / clickable card
  * <Card title="Open Application" onClick={() => navigate('/app/123')}>
  *   <p>Click anywhere to open.</p>
  * </Card>
+ * ```
  */
 export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
 
@@ -337,19 +364,30 @@ export declare interface CardProps {
  * Three sizes (sm, md, lg) follow the type scale.
  *
  * @example
- * <Checkbox label="Remember me" />
  *
+ * ```tsx
+ * <Checkbox label="Remember me" />
+ * ```
  * @example
- * <Checkbox label="Agree to terms" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
  *
+ * ```tsx
+ * <Checkbox label="Agree to terms" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
+ * ```
  * @example
- * <Checkbox label="Select all" indeterminate />
  *
+ * ```tsx
+ * <Checkbox label="Select all" indeterminate />
+ * ```
  * @example
- * <Checkbox label="Accept terms" invalid helperText="You must accept the terms to continue." />
  *
+ * ```tsx
+ * <Checkbox label="Accept terms" invalid helperText="You must accept the terms to continue." />
+ * ```
  * @example
+ *
+ * ```tsx
  * <Checkbox label="Dense option" size="sm" />
+ * ```
  */
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 
@@ -376,10 +414,15 @@ export declare interface CheckboxProps extends Omit<React.InputHTMLAttributes<HT
  * A `Tooltip` showing the `aria-label` is rendered automatically on hover.
  *
  * @example
- * <CloseButton onClick={onClose} />
  *
+ * ```tsx
+ * <CloseButton onClick={onClose} />
+ * ```
  * @example
+ *
+ * ```tsx
  * <CloseButton aria-label="Close dialog" size="md" onClick={onClose} />
+ * ```
  */
 export declare const CloseButton: ForwardRefExoticComponent<CloseButtonProps & RefAttributes<HTMLButtonElement>>;
 
@@ -418,6 +461,8 @@ export declare interface ColumnFilter {
  * expandable row groups, nested row expansion, and inline row/cell editing.
  *
  * @example
+ *
+ * ```tsx
  * <DataTable
  *   data={loans}
  *   dataKey="id"
@@ -426,6 +471,7 @@ export declare interface ColumnFilter {
  *     { field: 'amount', header: 'Amount', body: (row) => formatCurrency(row.amount) },
  *   ]}
  * />
+ * ```
  */
 export declare function DataTable<T extends object = Record<string, unknown>>({ data, columns, dataKey, selectionMode, selection, onSelectionChange, sortMode, sortField, sortOrder, multiSortMeta, onSort, expansion, editMode, onRowEditSave, onRowEditCancel, onCellEdit, stripedRows, size, showFooter, loading, emptyMessage, scrollable, scrollHeight, className, style, }: DataTableProps<T>): JSX_2.Element;
 
@@ -527,13 +573,20 @@ export declare interface DataTableProps<T extends object = Record<string, unknow
  * or pick one from the calendar. Three views: day, month, and year.
  *
  * @example
- * <DatePicker label="Closing date" value={date} onChange={setDate} />
  *
+ * ```tsx
+ * <DatePicker label="Closing date" value={date} onChange={setDate} />
+ * ```
  * @example
- * <DatePicker label="Start date" value={date} onChange={setDate} minDate={new Date()} />
  *
+ * ```tsx
+ * <DatePicker label="Start date" value={date} onChange={setDate} minDate={new Date()} />
+ * ```
  * @example
+ *
+ * ```tsx
  * <DatePicker label="Date" value={date} onChange={setDate} required invalid helperText="Required." />
+ * ```
  */
 export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
 
@@ -582,6 +635,8 @@ export declare const DEFAULT_DOC_TYPES: string[];
  * click, or Escape key.
  *
  * @example
+ *
+ * ```tsx
  * const [open, setOpen] = useState(false);
  * <Drawer
  *   isOpen={open}
@@ -592,6 +647,7 @@ export declare const DEFAULT_DOC_TYPES: string[];
  * >
  *   <p>Drawer content here…</p>
  * </Drawer>
+ * ```
  */
 export declare const Drawer: ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLDivElement>>;
 
@@ -648,6 +704,8 @@ export declare interface DrawerProps {
  * variant and size system as Button, with a built-in trailing chevron icon.
  *
  * @example
+ *
+ * ```tsx
  * <DropdownButton
  *   label="Actions"
  *   items={[
@@ -657,9 +715,12 @@ export declare interface DrawerProps {
  *   ]}
  *   onSelect={handleAction}
  * />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * <DropdownButton label="Export" variant="secondary" size="sm" items={exportItems} onSelect={onExport} />
+ * ```
  */
 export declare const DropdownButton: ForwardRefExoticComponent<DropdownButtonProps & RefAttributes<HTMLDivElement>>;
 
@@ -707,10 +768,13 @@ export declare type EditMode = 'row' | 'cell';
  * Invalid file types show an error message below the drop zone.
  *
  * @example
+ *
+ * ```tsx
  * <FileUpload
  *   onFilesAdded={files => myApi.upload(files)}
  *   onUpload={results => myApi.classify(results)}
  * />
+ * ```
  */
 export declare function FileUpload({ onFilesAdded, onUpload, docTypes, accept, initialFiles, className, style, }: FileUploadProps): JSX_2.Element;
 
@@ -810,13 +874,20 @@ export declare interface FullNavProps {
  * mouse users — no extra prop needed.
  *
  * @example
- * <IconButton icon={<i className="pi pi-search" />} aria-label="Search" />
  *
+ * ```tsx
+ * <IconButton icon={<i className="pi pi-search" />} aria-label="Search" />
+ * ```
  * @example
- * <IconButton icon={<i className="pi pi-trash" />} aria-label="Delete" variant="danger" />
  *
+ * ```tsx
+ * <IconButton icon={<i className="pi pi-trash" />} aria-label="Delete" variant="danger" />
+ * ```
  * @example
+ *
+ * ```tsx
  * <IconButton icon={<i className="pi pi-plus" />} aria-label="Add" size="sm" />
+ * ```
  */
 export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
 
@@ -837,6 +908,8 @@ export declare interface IconButtonProps extends React.ButtonHTMLAttributes<HTML
      * since there is no visible text.
      */
     'aria-label': string;
+    /** Which side the auto-tooltip appears on. Defaults to `'top'`. */
+    tooltipPlacement?: TooltipPlacement;
 }
 
 export declare function InlineAlert({ severity, message }: InlineAlertProps): JSX_2.Element;
@@ -874,28 +947,39 @@ export declare interface InlineContainedAlertProps {
  * Sizes follow the type scale (sm=10px, md=12px, lg=14px).
  *
  * @example
+ *
+ * ```tsx
  * // Basic
  * <InputText label="Search" placeholder="Enter a keyword" />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Required with helper text
  * <InputText label="Email" required helperText="We'll never share your email." />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Invalid / error state
  * <InputText label="Email" invalid helperText="Please enter a valid email address." />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // With icons
  * <InputText
  *   label="Search"
  *   prefixIcon={<i className="pi pi-search" />}
  *   suffixIcon={<i className="pi pi-times" />}
  * />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Large size
  * <InputText label="Full name" size="lg" placeholder="Jane Smith" />
+ * ```
  */
 export declare const InputText: ForwardRefExoticComponent<InputTextProps & RefAttributes<HTMLInputElement>>;
 
@@ -931,12 +1015,15 @@ export declare interface InputTextProps extends Omit<React.InputHTMLAttributes<H
  * A `Tooltip` showing the `aria-label` is rendered automatically on hover.
  *
  * @example
+ *
+ * ```tsx
  * <LightningButton
  *   variant="basic"
  *   items={[{ label: 'Copy Loan', value: 'copy' }]}
  *   onSelect={(v) => console.log(v)}
  *   aria-label="Quick actions"
  * />
+ * ```
  */
 export declare const LightningButton: ForwardRefExoticComponent<LightningButtonProps & RefAttributes<HTMLButtonElement>>;
 
@@ -982,16 +1069,25 @@ export declare interface LightningButtonProps {
  * grouped option sets with bold group headers.
  *
  * @example
- * <ListBox options={items} value={val} onChange={setVal} />
  *
+ * ```tsx
+ * <ListBox options={items} value={val} onChange={setVal} />
+ * ```
  * @example
- * <ListBox multiple options={items} value={vals} onChange={setVals} />
  *
+ * ```tsx
+ * <ListBox multiple options={items} value={vals} onChange={setVals} />
+ * ```
  * @example
- * <ListBox multiple filter label="Loan Type" options={items} value={vals} onChange={setVals} />
  *
+ * ```tsx
+ * <ListBox multiple filter label="Loan Type" options={items} value={vals} onChange={setVals} />
+ * ```
  * @example
+ *
+ * ```tsx
  * <ListBox multiple options={groupedItems} value={vals} onChange={setVals} />
+ * ```
  */
 export declare const ListBox: ForwardRefExoticComponent<ListBoxProps & RefAttributes<HTMLDivElement>>;
 
@@ -1055,6 +1151,8 @@ export declare interface ListBoxProps {
  * a `BannerAlert` strip below.
  *
  * @example
+ *
+ * ```tsx
  * <LoanBannerNav
  *   tabs={tabs}
  *   activeTabId="urla"
@@ -1062,6 +1160,7 @@ export declare interface ListBoxProps {
  *   onRefresh={handleRefresh}
  *   onPrimary={handleSave}
  * />
+ * ```
  */
 export declare const LoanBannerNav: ForwardRefExoticComponent<LoanBannerNavProps & RefAttributes<HTMLElement>>;
 
@@ -1197,13 +1296,13 @@ export declare interface MentionItem {
     label: string;
 }
 
-export declare function MiscChip({ label, color, dismissible, onDismiss }: MiscChipProps): JSX_2.Element;
+export declare function MiscChip({ label, color, dismissible, onDismiss, style, forceFocus }: MiscChipProps): JSX_2.Element;
 
 export declare namespace MiscChip {
     var displayName: string;
 }
 
-export declare type MiscChipColor = 'red-darkest' | 'red-light' | 'yellow-darkest' | 'yellow-dark' | 'yellow-light' | 'green-darkest' | 'green-dark' | 'green-light' | 'blue-darkest' | 'blue-dark' | 'blue-light' | 'navy';
+export declare type MiscChipColor = 'red-darkest' | 'red-dark' | 'red-light' | 'yellow-darkest' | 'yellow-dark' | 'yellow-light' | 'green-darkest' | 'green-dark' | 'green-light' | 'blue-darkest' | 'blue-dark' | 'blue-light' | 'navy-darkest' | 'navy-dark' | 'navy-light';
 
 export declare interface MiscChipProps {
     label: string;
@@ -1214,6 +1313,9 @@ export declare interface MiscChipProps {
      */
     dismissible?: boolean;
     onDismiss?: () => void;
+    style?: React.CSSProperties;
+    /** Forces the dismiss button to render with a visible focus ring — for Storybook focus-state stories. */
+    forceFocus?: boolean;
 }
 
 /**
@@ -1226,6 +1328,8 @@ export declare interface MiscChipProps {
  * Fully controlled — pass `isOpen` + `onClose`.
  *
  * @example
+ *
+ * ```tsx
  * const [open, setOpen] = useState(false);
  * <Modal
  *   isOpen={open}
@@ -1240,6 +1344,7 @@ export declare interface MiscChipProps {
  * >
  *   <p>Are you sure you want to leave without saving?</p>
  * </Modal>
+ * ```
  */
 export declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>;
 
@@ -1276,13 +1381,20 @@ export declare interface ModalProps {
  * and a "Select all" toggle. Three sizes follow the type scale.
  *
  * @example
- * <MultiSelect options={items} value={vals} onChange={setVals} label="Loan types" />
  *
+ * ```tsx
+ * <MultiSelect options={items} value={vals} onChange={setVals} label="Loan types" />
+ * ```
  * @example
- * <MultiSelect options={items} value={vals} onChange={setVals} required invalid helperText="Select at least one." />
  *
+ * ```tsx
+ * <MultiSelect options={items} value={vals} onChange={setVals} required invalid helperText="Select at least one." />
+ * ```
  * @example
+ *
+ * ```tsx
  * <MultiSelect options={items} value={vals} onChange={setVals} filter={false} showSelectAll={false} />
+ * ```
  */
 export declare const MultiSelect: ForwardRefExoticComponent<MultiSelectProps & RefAttributes<HTMLDivElement>>;
 
@@ -1361,17 +1473,24 @@ export declare interface PageChangeEvent {
  * paginated list. Three layout templates: `pages`, `report`, and `full`.
  *
  * @example
+ *
+ * ```tsx
  * // Basic page navigation
  * <Paginator totalRecords={200} first={0} rows={10} onPageChange={setPage} />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Text summary instead of page numbers
  * <Paginator totalRecords={200} first={0} rows={10} onPageChange={setPage} template="report" />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Full layout with rows-per-page selector
  * <Paginator totalRecords={200} first={0} rows={10} onPageChange={setPage}
  *   template="full" rowsPerPageOptions={[10, 25, 50]} />
+ * ```
  */
 export declare const Paginator: ForwardRefExoticComponent<PaginatorProps & RefAttributes<HTMLDivElement>>;
 
@@ -1410,6 +1529,8 @@ export declare interface PaginatorProps {
  * and `onChange` fires with the updated arrays on every move action.
  *
  * @example
+ *
+ * ```tsx
  * // Simple string list
  * <Picklist
  *   sourceItems={source}
@@ -1418,8 +1539,10 @@ export declare interface PaginatorProps {
  *   sourceHeader="Available"
  *   targetHeader="Selected"
  * />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Table-style rows
  * <Picklist
  *   sourceItems={source}
@@ -1429,6 +1552,7 @@ export declare interface PaginatorProps {
  *   targetHeader={<MyTableHeader />}
  *   itemTemplate={(item) => <MyTableRow item={item} />}
  * />
+ * ```
  */
 export declare const Picklist: ForwardRefExoticComponent<PicklistProps & RefAttributes<HTMLDivElement>>;
 
@@ -1500,16 +1624,19 @@ export declare interface PicklistProps {
  * screen position to place itself; the trigger is responsible for toggling state.
  *
  * @example
+ *
+ * ```tsx
  * const [open, setOpen] = useState(false);
  * <Popup
  *   trigger={<Button onClick={() => setOpen(true)}>Details</Button>}
  *   isOpen={open}
  *   onClose={() => setOpen(false)}
  *   title="Loan Details"
- *   footer={<Button size="sm" onClick={() => setOpen(false)}>Close</Button>}
+ *   footer={<Button size="md" onClick={() => setOpen(false)}>Close</Button>}
  * >
  *   <p>…content…</p>
  * </Popup>
+ * ```
  */
 export declare const Popup: ForwardRefExoticComponent<PopupProps & RefAttributes<HTMLDivElement>>;
 
@@ -1527,7 +1654,7 @@ export declare interface PopupProps {
     title?: string;
     /** Popup body content — any ReactNode */
     children: React.ReactNode;
-    /** Footer slot — typically action buttons, right-aligned with a separator border */
+    /** Footer slot — typically action buttons, right-aligned */
     footer?: React.ReactNode;
     /**
      * Which side of the trigger the popup opens on.
@@ -1641,16 +1768,25 @@ export declare interface ProgressSpinnerProps {
  * under a shared `name` prop so the browser enforces single selection.
  *
  * @example
- * <RadioButton name="plan" value="basic" label="Basic" />
  *
+ * ```tsx
+ * <RadioButton name="plan" value="basic" label="Basic" />
+ * ```
  * @example
- * <RadioButton name="plan" value="pro" label="Pro" checked onChange={handleChange} />
  *
+ * ```tsx
+ * <RadioButton name="plan" value="pro" label="Pro" checked onChange={handleChange} />
+ * ```
  * @example
- * <RadioButton name="plan" value="enterprise" label="Enterprise" invalid helperText="Contact sales first." />
  *
+ * ```tsx
+ * <RadioButton name="plan" value="enterprise" label="Enterprise" invalid helperText="Contact sales first." />
+ * ```
  * @example
+ *
+ * ```tsx
  * <RadioButton name="plan" value="basic" label="Small" size="sm" />
+ * ```
  */
 export declare const RadioButton: ForwardRefExoticComponent<RadioButtonProps & RefAttributes<HTMLInputElement>>;
 
@@ -1763,13 +1899,20 @@ export declare interface RuleFilterValue {
  * idle, hover, active/open, filled, invalid, and disabled.
  *
  * @example
- * <Select options={opts} value={val} onChange={setVal} label="Loan type" />
  *
+ * ```tsx
+ * <Select options={opts} value={val} onChange={setVal} label="Loan type" />
+ * ```
  * @example
- * <Select options={opts} value={val} onChange={setVal} required invalid helperText="Required." />
  *
+ * ```tsx
+ * <Select options={opts} value={val} onChange={setVal} required invalid helperText="Required." />
+ * ```
  * @example
+ *
+ * ```tsx
  * <Select options={opts} value={val} onChange={setVal} filter size="lg" />
+ * ```
  */
 export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLDivElement>>;
 
@@ -1783,6 +1926,8 @@ export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttribut
  * Each option can carry an optional count number and a colored badge indicator.
  *
  * @example
+ *
+ * ```tsx
  * // Toggle group
  * <SelectButton
  *   options={[
@@ -1793,8 +1938,10 @@ export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttribut
  *   value={view}
  *   onChange={setView}
  * />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Dropdown options variant
  * <SelectButton
  *   variant="options"
@@ -1803,6 +1950,7 @@ export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttribut
  *   onChange={setStatus}
  *   label="Status"
  * />
+ * ```
  */
 export declare const SelectButton: ForwardRefExoticComponent<SelectButtonProps & RefAttributes<HTMLDivElement>>;
 
@@ -1925,12 +2073,15 @@ export declare type SeverityChipVariant = 'plain' | 'contrast' | 'error' | 'warn
  * content left when the panel opens.
  *
  * @example
+ *
+ * ```tsx
  * <SidePanelLayout open={open} panelWidth={470}>
  *   <main>…page content…</main>
  * </SidePanelLayout>
  * <SidePanel isOpen={open} onClose={() => setOpen(false)} title="Ryan Smith">
  *   …panel body…
  * </SidePanel>
+ * ```
  */
 export declare const SidePanel: ForwardRefExoticComponent<SidePanelProps & RefAttributes<HTMLDivElement>>;
 
@@ -1942,10 +2093,13 @@ export declare const SidePanel: ForwardRefExoticComponent<SidePanelProps & RefAt
  * `SidePanel` alongside it (outside this wrapper).
  *
  * @example
+ *
+ * ```tsx
  * <SidePanelLayout open={panelOpen} panelWidth={470}>
  *   <main>…page content…</main>
  * </SidePanelLayout>
  * <SidePanel isOpen={panelOpen} onClose={close} title="Details">…</SidePanel>
+ * ```
  */
 export declare const SidePanelLayout: ForwardRefExoticComponent<SidePanelLayoutProps & RefAttributes<HTMLDivElement>>;
 
@@ -2005,6 +2159,8 @@ export declare type SortOrder = 1 | -1;
  * (defaults to `"More options"`) since it has no visible text label.
  *
  * @example
+ *
+ * ```tsx
  * <SplitButton
  *   label="Import"
  *   onAction={handleImport}
@@ -2015,9 +2171,12 @@ export declare type SortOrder = 1 | -1;
  *   ]}
  *   onSelect={handleSelect}
  * />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * <SplitButton label="Save" variant="secondary" onAction={onSave} items={moreActions} onSelect={onSelect} />
+ * ```
  */
 export declare const SplitButton: ForwardRefExoticComponent<SplitButtonProps & RefAttributes<HTMLDivElement>>;
 
@@ -2104,6 +2263,8 @@ export declare interface TabItem {
  *   as `<nav>` for the right semantics.
  *
  * @example
+ *
+ * ```tsx
  * // Panel variant (default) — sub-section switcher with content below.
  * const [active, setActive] = useState('tab1');
  * <Tabs
@@ -2114,8 +2275,10 @@ export declare interface TabItem {
  *   activeTab={active}
  *   onChange={setActive}
  * />
- *
+ * ```
  * @example
+ *
+ * ```tsx
  * // Nav variant — top-level page navigation, no content panel.
  * <Tabs
  *   variant="nav"
@@ -2127,6 +2290,7 @@ export declare interface TabItem {
  *   activeTab={page}
  *   onChange={setPage}
  * />
+ * ```
  */
 export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
 
@@ -2157,16 +2321,25 @@ export declare interface TabsProps {
  * invalid, and disabled. Supports optional auto-grow behaviour.
  *
  * @example
- * <TextArea label="Loan notes" placeholder="Enter notes…" rows={4} />
  *
+ * ```tsx
+ * <TextArea label="Loan notes" placeholder="Enter notes…" rows={4} />
+ * ```
  * @example
- * <TextArea label="Comments" maxLength={500} />
  *
+ * ```tsx
+ * <TextArea label="Comments" maxLength={500} />
+ * ```
  * @example
- * <TextArea label="Description" autoGrow />
  *
+ * ```tsx
+ * <TextArea label="Description" autoGrow />
+ * ```
  * @example
+ *
+ * ```tsx
  * <TextArea label="Notes" invalid helperText="This field is required." />
+ * ```
  */
 export declare const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
 
@@ -2206,8 +2379,11 @@ export declare namespace Toast {
  * Imperative toast API. Requires `<Toaster />` to be mounted in the app.
  *
  * @example
+ *
+ * ```tsx
  * toast.success('Saved', 'Loan application saved successfully.');
  * toast.error('Failed', 'Unable to update loan. Please try again.');
+ * ```
  */
 export declare const toast: {
     success: (title: string, detail?: string, opts?: ToastOptions) => void;
@@ -2220,11 +2396,14 @@ export declare const toast: {
  * Toaster — mount once in your app root to enable toast notifications.
  *
  * @example
+ *
+ * ```tsx
  * // In App.tsx or layout root:
  * <Toaster />
  *
  * // Anywhere else:
  * toast.success('Saved', 'Your changes have been saved.');
+ * ```
  */
 export declare function Toaster(): ReactPortal | null;
 
@@ -2258,13 +2437,20 @@ export declare type ToastSeverity = 'success' | 'info' | 'warn' | 'error';
  * and controlled/uncontrolled usage.
  *
  * @example
- * <ToggleSwitch label="Enable notifications" checked={on} onChange={e => setOn(e.target.checked)} />
  *
+ * ```tsx
+ * <ToggleSwitch label="Enable notifications" checked={on} onChange={e => setOn(e.target.checked)} />
+ * ```
  * @example
- * <ToggleSwitch label="Auto-lock" defaultChecked />
  *
+ * ```tsx
+ * <ToggleSwitch label="Auto-lock" defaultChecked />
+ * ```
  * @example
+ *
+ * ```tsx
  * <ToggleSwitch label="Feature locked" disabled />
+ * ```
  */
 export declare const ToggleSwitch: ForwardRefExoticComponent<ToggleSwitchProps & RefAttributes<HTMLInputElement>>;
 
@@ -2281,14 +2467,24 @@ export declare interface ToggleSwitchProps extends Omit<React.InputHTMLAttribute
  * A small informational bubble anchored to a trigger element. Appears on
  * hover and keyboard focus; hides on mouse leave and blur.
  *
+ * The bubble is rendered through a portal to `document.body` and positioned
+ * with `position: fixed` coordinates measured from the trigger, so it is never
+ * clipped by an ancestor with `overflow: hidden | auto | scroll` (e.g. a
+ * scrollable table or data grid). It tracks the trigger on scroll and resize
+ * while visible, and flips to the opposite side when the preferred side would
+ * run off-screen. (Same portal + fixed-position approach as Popup/Drawer.)
+ *
  * Wraps its child in an inline container — the child itself is not modified.
  * Uses `aria-describedby` to associate the tooltip text with the trigger for
  * screen readers.
  *
  * @example
+ *
+ * ```tsx
  * <Tooltip content="Delete this record" placement="top">
  *   <IconButton icon={<i className="pi pi-trash" />} aria-label="Delete" />
  * </Tooltip>
+ * ```
  */
 export declare function Tooltip({ content, children, placement, delay, disabled, maxWidth, className, }: TooltipProps): JSX_2.Element;
 
@@ -2390,6 +2586,8 @@ export declare interface TopBarUserProfile {
  * - **Right section**: optional AUS action buttons + scrollable tab strip
  *
  * @example
+ *
+ * ```tsx
  * <URLATabsNav
  *   applicants={[{ id: 'joint', label: 'Ryan Smith | Laura Smith' }]}
  *   selectedApplicantId="joint"
@@ -2398,6 +2596,7 @@ export declare interface TopBarUserProfile {
  *   activeTabId={activeTab}
  *   onTabChange={setActiveTab}
  * />
+ * ```
  */
 export declare const URLATabsNav: ForwardRefExoticComponent<URLATabsNavProps & RefAttributes<HTMLDivElement>>;