@oatfi/ui 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -478,6 +478,339 @@ interface DotsMenuProps {
  */
 declare function DotsMenu({ options, iconSize, ariaLabel, testId, }: DotsMenuProps): react__default.JSX.Element;
 
+/**
+ * Accent asterisk marker, for annotating a label whose explanation appears in an
+ * `AsteriskNote` below it. Render with `aria-hidden` — the note carries the
+ * meaning, the mark is decoration.
+ */
+declare const AsteriskMark: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+/**
+ * Muted italic helper text paired with an `AsteriskMark`. Use the `.asterisk`
+ * class on a leading span to render the marker upright and accented inside the
+ * italic run:
+ *
+ * ```tsx
+ * <AsteriskNote>
+ *   <span className="asterisk" aria-hidden="true">*</span>
+ *   Provide Financial Statements to be approved for a higher credit limit.
+ * </AsteriskNote>
+ * ```
+ *
+ * Named `AsteriskNote` rather than `Footnote` deliberately: this package already
+ * exports a `Footnote`, which is an entirely different thing — a page-bottom
+ * `<footer>` with a title and links. The two were separate components sharing one
+ * name across repos, which is how they drifted.
+ *
+ * All colours come from theme tokens, so partner white-labelling recolours both.
+ */
+declare const AsteriskNote: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+
+/**
+ * `info`    — accent-tinted, for a suggestion ("Recommended")
+ * `success` — outlined green, for a confirmed state ("Verified")
+ * `neutral` — outlined grey, for a plain source label ("Via Plaid")
+ * `filled`  — solid accent, for the one selected item in a set ("Default")
+ */
+type BadgeVariant = 'info' | 'success' | 'neutral' | 'filled';
+/**
+ * Small uppercase status pill.
+ *
+ * Overlaps `StatusTag` in role — both label a state in a few words — but they are
+ * not interchangeable: `StatusTag` is a solid filled tag with capitalised text,
+ * this is an uppercase letter-spaced pill. Both are in shipped, QA-approved UI, so
+ * consolidating them would change screens rather than clean up code.
+ *
+ * The four variants exist because onboarding grew two separate `Badge`
+ * components — one on the verification sources page, one on payment methods —
+ * with the same name, different looks, and colliding variant names (that one's
+ * unstyled default was this one's `neutral`, and its `default` was `filled`).
+ * Callers should always pass `$variant` explicitly rather than relying on the
+ * fallback.
+ */
+declare const Badge: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$variant"> & {
+    $variant?: BadgeVariant;
+}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$variant"> & {
+    $variant?: BadgeVariant;
+}, never>>> & string;
+
+/** An already-uploaded file, as returned by the API rather than a local `File`. */
+interface UploadedFile {
+    id: string;
+    fileName: string;
+    fileSize: number;
+}
+interface UploadZoneProps {
+    /** Comma-separated extension list, e.g. `.pdf,.xlsx`. */
+    accept?: string;
+    /** Requirements line under the drop target, e.g. "PDF up to 25MB each". */
+    hint?: string;
+    files?: UploadedFile[];
+    /** Called with the raw `FileList` from the picker or a drop. */
+    onAdd: (files: FileList) => void;
+    onRemove: (id: string) => void;
+    /** Ids currently being deleted — each shows a spinner instead of a remove button. */
+    removingIds?: Set<string>;
+    disabled?: boolean;
+    inputId?: string;
+    testId?: string;
+}
+/**
+ * Multi-file drop target with a list of what has already been uploaded.
+ *
+ * Distinct from `FileInput`, which is a single-file form field that validates and
+ * emits `(file, error)`. This one accepts many files, reports nothing about
+ * validity, and renders server-side state — the caller owns validation, upload
+ * and deletion. Keyboard accessible: the zone is a `role="button"` that opens the
+ * picker on Enter or Space.
+ */
+declare function UploadZone({ accept, hint, files, onAdd, onRemove, removingIds, disabled, inputId, testId, }: UploadZoneProps): react__default.JSX.Element;
+
+interface CollapsibleSourceProps {
+    title: string;
+    /** One-line description under the title. */
+    desc?: string;
+    /**
+     * Optional asterisk note. Its presence adds an `AsteriskMark` to the title and
+     * renders the note under the description.
+     */
+    note?: string;
+    open?: boolean;
+    onToggle?: () => void;
+    children?: react__default.ReactNode;
+    testId?: string;
+}
+/**
+ * One expandable verification/upload source: a header row that toggles, with the
+ * content revealed below. Only the open source is expanded, so a caller managing
+ * several passes `open` and `onToggle` per source.
+ *
+ * Purely presentational — it owns no open state and knows nothing about what it
+ * contains.
+ */
+declare function CollapsibleSource({ title, desc, note, open, onToggle, children, testId, }: CollapsibleSourceProps): react__default.JSX.Element;
+
+/** The subset of a Plaid connection this tile renders. */
+interface PlaidConnection {
+    institution?: {
+        name?: string;
+    } | null;
+    accounts?: {
+        mask?: string;
+        accountMask?: string;
+    }[] | null;
+}
+interface PlaidTileProps {
+    /** Null or undefined renders the unconnected state. */
+    plaidData?: PlaidConnection | null;
+    onConnect?: () => void;
+    isConnecting?: boolean;
+    /** Rendered as `data-testid` on the connect/reconnect button. */
+    testId?: string;
+}
+/**
+ * Bank-connection tile for Plaid: shows the connected institution and masked
+ * account, or a prompt to connect.
+ *
+ * Styled through the MUI palette rather than styled-components theme tokens,
+ * because it needs `alpha()` on the success colour. Both are driven by the same
+ * partner branding via `buildMuiTheme`, so white-labelling still applies.
+ */
+declare function PlaidTile({ plaidData, onConnect, isConnecting, testId }: PlaidTileProps): react__default.JSX.Element;
+
+interface TermsDocumentProps {
+    /**
+     * **Already-sanitized** HTML. This component renders it with
+     * `dangerouslySetInnerHTML` and does no sanitizing of its own — the caller owns
+     * that, because sanitizing here would make DOMPurify a dependency of every
+     * consumer of this package.
+     *
+     * Callers fetch terms as HTML from the API, decode entities, run DOMPurify, and
+     * pass the result. Never pass anything that has not been through that.
+     */
+    html: string;
+    className?: string;
+    testId?: string;
+}
+/**
+ * Scrollable panel for a terms or disclosure document.
+ *
+ * Note the background: onboarding's original read `theme.colors.paper`, which is
+ * not a token in this theme, so it silently resolved to nothing and the panel had
+ * no background at all. This uses `surface`, which is what it was reaching for.
+ */
+declare function TermsDocument({ html, className, testId }: TermsDocumentProps): react__default.JSX.Element;
+/** Right-aligned hint under an action, e.g. why a button is disabled. */
+declare const HelperText: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+
+/**
+ * Underwriting outcomes as the API reports them.
+ *
+ * The declined set is deliberately wide: `CLOSED_NO_DECISION`, `DECLINED`,
+ * `DENIED`, `ERROR`, `N/A` and `REJECTED` all mean "no" to a borrower and are
+ * shown identically. Anything unrecognised — including `MANUAL_REVIEW`,
+ * `NOT_EXECUTED` and `null` — falls through to the manual-review message rather
+ * than showing nothing, because an unknown status must never read as approval.
+ */
+type UnderwritingDecision = 'PROCESSING' | 'APPROVED' | 'MANUAL_REVIEW' | 'NOT_EXECUTED' | 'CLOSED_NO_DECISION' | 'DECLINED' | 'DENIED' | 'ERROR' | 'N/A' | 'REJECTED';
+interface UnderwritingStatusProps {
+    status?: string | null;
+    /**
+     * Pre-formatted for display, e.g. `"$50,000.00"`. A string rather than a number
+     * so currency formatting stays with the consumer — this package has no locale or
+     * currency opinion. Omit to show approval without an amount.
+     */
+    creditLimit?: string | null;
+    /** Rendered under the approved state, for follow-on actions. */
+    children?: react__default.ReactNode;
+    testId?: string;
+}
+/**
+ * The borrower-facing result of underwriting: in progress, approved, declined, or
+ * under manual review.
+ *
+ * Presentational only — it neither fetches nor polls. The caller owns the status
+ * and re-renders this as it changes.
+ */
+declare function UnderwritingStatus({ status, creditLimit, children, testId, }: UnderwritingStatusProps): react__default.JSX.Element;
+
+/**
+ * Layout for a payment-method row: a radio, a body, and a header with a title and
+ * a trailing action.
+ *
+ * `$default` marks the selected method (accent border and tint); `$readonly` marks
+ * one the borrower cannot edit here, such as an account managed through Plaid;
+ * `$edited` marks one carrying changes that have not been saved yet.
+ */
+declare const MethodCard: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly" | "$edited"> & {
+    $default?: boolean;
+    $readonly?: boolean;
+    $edited?: boolean;
+}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly" | "$edited"> & {
+    $default?: boolean;
+    $readonly?: boolean;
+    $edited?: boolean;
+}, never>>> & string;
+declare const MethodBody: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/** `$tight` for a card with no form fields under the header. */
+declare const MethodHeader: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tight"> & {
+    $tight?: boolean;
+}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$tight"> & {
+    $tight?: boolean;
+}, never>>> & string;
+declare const MethodTitle: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+/** Two-up field row that stacks on narrow screens. */
+declare const FieldsGrid: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/** Accent-tinted note with a leading icon slot. */
+declare const Banner: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/**
+ * Footer row for a step's actions.
+ *
+ * `space-between` is for the two-part footer a stepped flow has — Back on the
+ * left, status and the primary action on the right. A servicing screen that saves
+ * in place has no Back, and space-between then drops its lone action on the left,
+ * where it reads as the secondary half of a pair that isn't there. So a single
+ * child is pushed to the right instead; two or more keep the split.
+ */
+declare const FooterActions: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const FooterRight: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+
+interface PlaidMethodCardProps {
+    plaidData?: {
+        institution?: {
+            name?: string;
+        } | null;
+        accounts?: {
+            mask?: string;
+            accountMask?: string;
+        }[] | null;
+    } | null;
+    isDefault?: boolean;
+    onSelectDefault?: () => void;
+    /** Distinguishes the radio group when several cards share a page. */
+    name?: string;
+    testId?: string;
+}
+/**
+ * Read-only payment method sourced from Plaid. It cannot be edited or removed
+ * here — disconnecting happens wherever the bank connection is managed — but it
+ * can still be chosen as the default.
+ *
+ * Routing is deliberately absent: Plaid Link metadata exposes an account mask but
+ * no routing number client-side.
+ */
+declare function PlaidMethodCard({ plaidData, isDefault, onSelectDefault, name, testId, }: PlaidMethodCardProps): react__default.JSX.Element;
+
+interface ManualMethodValue {
+    id: string;
+    account: string;
+    routing: string;
+}
+/**
+ * Where the row stands against what is stored.
+ *
+ * `saved` — on file and unchanged. `edited` — on file, with changes not yet
+ * written. A row the borrower has just added is neither: omit the prop.
+ *
+ * Only `edited` is marked. `saved` deliberately renders the same as a new row for
+ * now — the card stays quiet until the borrower actually changes something — but
+ * it remains a distinct value because the caller already tells the two apart, and
+ * marking a stored row is a change of copy here rather than a change of API.
+ *
+ * The caller owns the comparison, because only it knows what was loaded.
+ */
+type ManualMethodStatus = 'saved' | 'edited';
+interface ManualMethodCardProps {
+    /** Zero-based; rendered as "Account {index + 1}". */
+    index: number;
+    value: ManualMethodValue;
+    isDefault?: boolean;
+    /**
+     * Whether this account is already stored, and whether it has been changed
+     * since. Omit for a row the borrower has just added. Only `edited` is marked.
+     */
+    status?: ManualMethodStatus;
+    /** Disables removal when this is the last remaining method. */
+    trashDisabled?: boolean;
+    disabled?: boolean;
+    accountError?: string;
+    routingError?: string;
+    onSelectDefault?: () => void;
+    onChangeField: (field: 'account' | 'routing', next: string) => void;
+    onBlurField: (field: 'account' | 'routing') => void;
+    onRemove?: () => void;
+    name?: string;
+}
+/**
+ * Editable manual payment method — account and routing number.
+ *
+ * Validation is the caller's: pass `accountError`/`routingError` and use
+ * `onBlurField` to decide when to surface them. Onboarding shows errors on blur
+ * and never while typing, which is worth keeping.
+ *
+ * A stored account is an ordinary editable field here — nothing about the inputs
+ * says the borrower is overwriting something real. `status` is what says it, and
+ * it is worth passing wherever saved accounts are rendered.
+ */
+declare function ManualMethodCard({ index, value, isDefault, status, trashDisabled, disabled, accountError, routingError, onSelectDefault, onChangeField, onBlurField, onRemove, name, }: ManualMethodCardProps): react__default.JSX.Element;
+
+interface AchVerificationConsentProps {
+    consentGiven?: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Label for the action the consent is attached to. Defaults to "Continue". */
+    actionLabel?: string;
+    testId?: string;
+}
+/**
+ * ACH verification consent and PATRIOT Act acknowledgement, required before
+ * payment methods can be saved.
+ *
+ * `actionLabel` exists because the copy names the button the borrower is about to
+ * press — "By clicking Continue…" is right in a stepped flow, but a servicing
+ * screen that saves in place needs its own verb.
+ */
+declare function AchVerificationConsent({ consentGiven, onChange, disabled, actionLabel, testId, }: AchVerificationConsentProps): react__default.JSX.Element;
+
 interface PreviewProps {
     /** Partner branding to render the sample with. Omit for the default theme. */
     branding?: Branding;
@@ -491,5 +824,5 @@ interface PreviewProps {
  */
 declare function Preview({ branding, className }: PreviewProps): react__default.JSX.Element;
 
-export { AutocompleteInput, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FileInput, FlexColumnWrapper, FlexRowWrapper, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, InputError, InputLabel, InputWrapper, Loader, NoResults, PhoneInput, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsList, TextInput, ThemeProvider, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
-export type { Branding, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, Option, PhoneInputProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography };
+export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
+export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodStatus, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };