@humanmark/sdk-js

/** * UI Constants for the Humanmark SDK * Centralizes all UI-related magic numbers, strings, and configuration */ /** * Standard namespaces for web content */ export declare const NAMESPACES: { /** SVG namespace for creating SVG elements */ readonly SVG: "http://www.w3.org/2000/svg"; }; /** * Animation and timing constants */ export declare const ANIMATION_TIMINGS: { /** Duration for fade out animations in milliseconds */ readonly FADE_OUT: 300; /** Duration for modal closing animation in milliseconds */ readonly MODAL_CLOSE: 300; /** Time to display success state before closing in milliseconds */ readonly SUCCESS_DISPLAY: 1500; /** Delay before clearing screen reader announcements in milliseconds */ readonly ANNOUNCEMENT_CLEAR: 1000; }; /** * Dimensions and sizes */ export declare const DIMENSIONS: { /** Default QR code width in pixels */ readonly QR_CODE_WIDTH: 256; /** QR code margin in modules */ readonly QR_CODE_MARGIN: 2; }; export declare const COLORS: { readonly QR_CODE: { /** Foreground color for QR code - using primary brand color */ readonly DARK: "#7C63FF"; /** Background color for QR code (transparent) */ readonly LIGHT: "#0000"; /** White background option for QR code */ readonly WHITE: "#FFFFFF"; /** Primary theme colors for inverted QR code */ readonly PRIMARY: "#7C63FF"; readonly PRIMARY_BG: "#7C63FF"; /** Secondary theme color - not used in new design */ readonly SECONDARY: "#C7BDFF"; }; }; /** * User-facing messages */ export declare const MESSAGES: { readonly VERIFICATION: { readonly TITLE: "Verify you're human"; readonly DESKTOP_SUBTITLE: "Scan with the Humanmark app"; readonly MOBILE_SUBTITLE: "Tap to verify with Humanmark"; readonly QR_INSTRUCTIONS: "No personal information will be shared"; readonly BUTTON_TEXT: "Verify with Humanmark"; readonly WHAT_IS_THIS: "What's this? →"; }; readonly SUCCESS: { readonly TITLE: "Verified!"; readonly SUBTITLE: "Returning to the site..."; }; readonly ACCESSIBILITY: { readonly QR_ALT_TEXT: "Humanmark Verification QR Code"; readonly MODAL_OPENED: "Human verification modal opened. Scan QR code or use the provided button to verify."; readonly MODAL_CLOSED: "Verification modal closed"; readonly VERIFICATION_SUCCESS: "Human verification successful"; readonly CLOSE_BUTTON_LABEL: "Close verification modal"; readonly PROGRESS_LABEL: "Time remaining for verification"; readonly TIME_NOTICE: "Scan this code with the Humanmark app to verify you're human."; }; readonly ERRORS: { readonly QR_GENERATION_FAILED: "Failed to generate QR code"; }; }; /** * CSS class names */ export declare const CSS_CLASSES: { readonly MODAL: { readonly OVERLAY: "humanmark-modal-overlay"; readonly CONTENT: "humanmark-modal-content"; readonly BODY: "humanmark-modal-body"; readonly HEADER: "humanmark-modal-header"; readonly CLOSING: "humanmark-closing"; readonly BODY_LOCK: "humanmark-modal-open"; }; readonly BUTTONS: { readonly CLOSE: "humanmark-modal-close"; readonly VERIFY: "humanmark-verify-button"; }; readonly LINKS: { readonly WHAT_IS_THIS: "humanmark-what-is-this"; }; readonly PROGRESS: { readonly CONTAINER: "humanmark-progress-container"; readonly BAR: "humanmark-progress-bar"; readonly HIDDEN: "humanmark-hidden"; }; readonly SUCCESS: { readonly CONTAINER: "humanmark-success-container"; readonly CHECKMARK: "humanmark-success-checkmark"; readonly MESSAGE: "humanmark-success-message"; readonly SUBMESSAGE: "humanmark-success-submessage"; readonly VISIBLE: "humanmark-success-visible"; }; readonly QR_CODE: { readonly CONTAINER: "humanmark-qr-container"; readonly WRAPPER: "humanmark-qr-wrapper"; readonly IMAGE: "humanmark-qr-image"; readonly INSTRUCTIONS: "humanmark-modal-instructions"; }; readonly MOBILE: { readonly CONTAINER: "humanmark-mobile-container"; }; readonly TITLE: { readonly CONTAINER: "humanmark-modal-title"; readonly BRAND: "humanmark-title-brand"; readonly SUPERSCRIPT: "humanmark-title-sup"; }; readonly SUBTITLE: "humanmark-modal-description"; readonly ACCESSIBILITY: { readonly SCREEN_READER_ONLY: "humanmark-sr-only"; }; readonly ANIMATIONS: { readonly FADE_OUT: "humanmark-fade-out"; }; }; /** * ARIA attributes */ export declare const ARIA: { readonly PROGRESS: { readonly VALUE_MIN: "0"; readonly VALUE_MAX: "120"; readonly VALUE_NOW: "120"; }; }; /** * Keyboard keys */ export declare const KEYBOARD_KEYS: { readonly ESCAPE: "Escape"; readonly TAB: "Tab"; }; /** * External URLs */ export declare const URLS: { readonly VERIFY_BASE: "https://humanmark.app/verify"; readonly WHAT_IS_THIS: "https://humanmark.app"; }; /** * Browser targets */ export declare const BROWSER_TARGETS: { readonly BLANK: "_blank"; }; /** * DOM element IDs */ export declare const ELEMENT_IDS: { readonly MODAL: "humanmark-verification-modal"; readonly TITLE: "humanmark-modal-title"; readonly DESCRIPTION: "humanmark-modal-description"; }; /** * SVG dimensions for success checkmark */ export declare const SVG_DIMENSIONS: { readonly VIEWBOX: "0 0 52 52"; readonly CIRCLE: { readonly CX: "26"; readonly CY: "26"; readonly R: "25"; }; readonly CHECK_PATH: "M14.1 27.2l7.1 7.2 16.7-16.8"; }; /** * Focusable element selectors for focus trap */ export declare const FOCUSABLE_SELECTORS: readonly ["button:not([disabled])", "a[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", "[tabindex]:not([tabindex=\"-1\"])"]; /** * QR code configuration */ export declare const QR_CONFIG: { readonly ERROR_CORRECTION_LEVEL: "L"; }; //# sourceMappingURL=ui.d.ts.map