goobs-frontend
Version:
A comprehensive React-based libary for building modern web applications
110 lines • 5.38 kB
TypeScript
import { FC } from 'react';
import { ButtonProps } from '../Button';
import { ConfirmationCodeInputsProps } from '../ConfirmationCodeInput';
/**
* Styling surface for the QR panel. `theme` maps to `data-theme` on each
* themed element; the scalar overrides ride in as `--qr-*` CSS custom
* properties, set only when provided so the theme defaults apply otherwise.
*/
export interface QRCodeStyles {
/** `data-theme` variant for the frame, title, and states: 'light' (default), 'dark', or 'sacred'. */
theme?: 'light' | 'dark' | 'sacred';
/** Frame background; the more specific `qrBackgroundColor` wins when both are set. */
backgroundColor?: string;
/** Frame border color; the more specific `qrBorderColor` wins when both are set. */
borderColor?: string;
/** Frame corner radius (theme default otherwise). */
borderRadius?: string;
/**
* Frame border width (default '1px' when combined with a border-color
* override; alone it keeps the theme's default border color).
*/
borderWidth?: string;
/** Frame inner padding (theme default otherwise). */
padding?: string;
/** Frame background; wins over `backgroundColor`. */
qrBackgroundColor?: string;
/** Frame border color; wins over `borderColor`. */
qrBorderColor?: string;
/** Frame box shadow (theme default otherwise). */
qrBoxShadow?: string;
/** Title heading color (theme default otherwise). */
titleColor?: string;
/** Title heading font size (theme default otherwise). */
titleFontSize?: string;
/** Title heading font weight (theme default otherwise). */
titleFontWeight?: string | number;
/** Success-state check icon color. Default: gold on sacred, green otherwise. */
successIconColor?: string;
/** Success-state message text color (theme default otherwise). */
successMessageColor?: string;
/** Text color of the no-value error message (theme default otherwise). */
errorTextColor?: string;
/** QR pixel size; overrides the top-level `size` prop when both are set. */
size?: number;
}
export interface QRCodeProps {
/**
* Text encoded into the QR code. When omitted or empty, the component
* renders an inline error message instead of a canvas.
*/
value?: string;
/**
* Rendered pixel size (default 256), clamped to the viewport width minus
* 32px; `styles.size` wins when both are set. The sacred theme draws the
* canvas 40px smaller to leave room for the frame.
*/
size?: number;
/** QR error-correction level. Default 'H'. */
level?: 'L' | 'M' | 'Q' | 'H';
/** Light-module color drawn on the canvas (independent of theme). Default '#FFFFFF'. */
bgColor?: string;
/** Dark-module color drawn on the canvas (independent of theme). Default '#000000'. */
fgColor?: string;
/** Heading rendered above the frame; also names the canvas aria-label ('MFA Setup' fallback). */
title?: string;
/** Renders a full-width "Verify Code" button under the QR. Default false. */
showVerifyButton?: boolean;
/** Verify-button click handler; a returned promise's rejection is caught and logged. */
onVerify?: () => void | Promise<void>;
/** Click handler for the success-state "Disable Verification" button; promise rejections are caught and logged. */
onDisableVerification?: () => void | Promise<void>;
/**
* Extra Button props spread onto the verify button. Note its `disabled`
* is combined with the built-in gate (disabled until 6 code digits are
* entered while `showConfirmationInput` is set).
*/
verifyButtonProps?: Partial<ButtonProps>;
/** Extra Button props spread onto the success-state "Disable Verification" button. */
disableVerificationButtonProps?: Partial<ButtonProps>;
/**
* Replaces the QR frame with the success pane: check icon, message, and
* the "Disable Verification" button. Default false.
*/
showSuccessState?: boolean;
/** Success-pane message. Default 'Verification Successful'. */
successMessage?: string;
/** Renders a 6-digit confirmation-code input under the QR and gates the verify button on it. Default false. */
showConfirmationInput?: boolean;
/** Controlled value of the confirmation-code input. Default ''. */
confirmationCode?: string;
/** Called with the confirmation-code input's new value. */
onConfirmationCodeChange?: (value: string) => void;
/** Extra ConfirmationCodeInputs props spread onto the code input. */
confirmationCodeProps?: Partial<ConfirmationCodeInputsProps>;
/** Theme plus frame/title/state styling overrides. See QRCodeStyles. */
styles?: QRCodeStyles;
}
/**
* MFA-style QR panel: draws `value` onto a canvas inside a themed frame, with
* an optional title, 6-digit confirmation-code input, and Verify button.
* `showSuccessState` swaps the whole panel for a success pane (check icon,
* message, "Disable Verification" button); a missing `value` renders an
* inline error instead. Themed light (default) / dark / sacred via
* `styles.theme`, with scalar overrides riding in as `--qr-*` CSS custom
* properties; the canvas module colors come from `bgColor`/`fgColor`, not the
* theme.
*/
declare const QRCodeComponent: FC<QRCodeProps>;
export default QRCodeComponent;
//# sourceMappingURL=index.d.ts.map