Phase 1 • Complete Atomic Tokens, Form Controls, Dialogs, Cards & Review Studio
Interactive action controls supporting 5 variants, 3 sizes, loading spinners, and icon slots.
Button Variants (Default Medium Size)
Button Sizes (WCAG Touch Target Compliant)
Accessible input controls with single crisp border, currency formatting, clear buttons, and range sliders.
Auto-formatted for Indian Rupee (INR) calculations
Target recipient for automated renewal reminders (10 digits)
Math Mismatch: (InstPrem × Dues) + GST does not equal Total Due Amount (± ₹1.00)
Range Slider Atoms
Dynamic coverage estimation slider
Standard GST tier (default: 18% on renewal fees)
Modular surface cards with header, content, and footer compound slots.
Standard surface with crisp 1px border
Used for primary data displays, table panels, and structured forms across BusinessSetu.
Surface with soft elevated shadow
Ideal for summary KPI statistics, hero widgets, and floating financial cards.
Click to trigger accessible modal
Includes subtle hover scale, shadow elevation, and clickable cursor. Click me to test <TcModal />!
WCAG 2.1 AA dialog with ESC dismiss, backdrop blur, scroll locking, and ARIA bindings.
Supports Tab focus trapping, body scroll locking, and Escape key dismissal.
Dual-pane document review studio with interactive draggable splitter, zoom (+/-), rotate (90°), and fullscreen mode.
Semantic headings (h1–h6) and text tokens ensuring consistent font scaling across all SaaS modules.
Body: Standard body text for paragraphs, policy descriptions, and client notes.
Body-SM: Secondary body text for meta attributes, dates, and hints.
Muted: Subtle text for secondary information.
CAPTION: Field labels and timestamp indicators.
const policyNumber = "123456789";
✓ Math Cross-Validation Passed
⚠ Premium Discrepancy Found
Semantic status tags with high-contrast color pairs, pulsing live status dots, and icon slots.
Subtle Style (Tinted Background with Matching High-Contrast Border)
Solid Style (Solid Fill with White Contrast Text)
WCAG 2.1 AA compliant pagination control with page sizing, numeric buttons, smart ellipsis, and screen-reader announcements.
Compact Mobile Variant:
Standardized filter controls featuring theme-differentiated badges, option pills, count chips, and native date pickers.
Floating multi-selection toolbar with select-all helpers, custom batch triggers, and destructive delete confirmations.
When items are selected across table or card directories, `<TcBulkActionBar />` floats at the bottom center of the screen with a pulse indicator and keyboard escape support.
Generic, domain-agnostic 2-column communication studios with live smartphone chat and responsive HTML email simulators.
Live smartphone chat viewport with 4-language switcher
Configurable scopes, localized templates (EN, HI, GU, MR), custom saved templates, dynamic payment CTA links, and direct WhatsApp Web routing.
Responsive HTML email viewport with desktop & mobile modes
Live HTML sandbox rendering, subject line editor, desktop/mobile preview toggles, HTML code inspector, and mail client deep-linking.